JS 동적 생 성 표를 실현 하고 표 데 이 터 를 백 엔 드 에 제출 합 니 다.

본 고 는 JS 가 동적 생 성 표를 실현 하고 백 엔 드 에 표 데 이 터 를 제출 하 는 관련 코드 를 소개 하여 여러분 에 게 참고 하도록 제공 합 니 다. 구체 적 인 내용 은 다음 과 같 습 니 다.
먼저 요 구 를 살 펴 보 겠 습 니 다. 웹 페이지 에서 동적 으로 표를 만 들 고 표 의 데 이 터 를 편집 한 다음 표 의 데 이 터 를 백 엔 드 서버 에 저장 할 수 있 습 니 다.
그러면 저희 가 먼저 해결 해 야 할 것 은 동적 생 성 표 문제 입 니 다.
1. 우선 JS 라 이브 러 리 파일 을 가 져 와 야 합 니 다.

2. 그리고 페이지 div 에서 미리 빈 표를 만 들 면 수요 에 따라 정할 수 있 습 니 다. 저 는 표 머리 가 있 는 표 입 니 다.

시계 머리
시계 머리
시계 머리
시계 머리
시계 머리
조작 하 다.
3. 표를 만 든 후에 우 리 는 동적 으로 표를 만 드 는 관건 적 인 코드 를 쓸 수 있다.트리거 사용 을 위 한 js 방법 을 쓰 겠 습 니 다.

var num = 0;
  function addTable(){
    var tableHtml ="";
    tableHtml += ''
         +''
         +''
         +''
         +''
         +''
         +'  '
           +'  '
           +'  '
         +''
         +'';
    
    var elements = $("#myTable").children().length;  //  id “mtTable”           
    
    $("#myTable").children().eq(elements - 1).after(tableHtml); //          
    num++;   
  }

탭 에 탭 을 추가 한 것 을 볼 수 있 습 니 다. 주로 사용자 가 인 자 를 입력 하 는 데 사 용 됩 니 다. 전역 변 수 는 num 입 니 다. 주로 추 가 된 매개 변수의 id 의 유일 성 을 구분 하 는 데 사 용 됩 니 다.
4. 다음 에 우 리 는 표를 조작 합 니 다.

//   
function removeTr(trNum){
  $("#tr"+trNum).remove();
}
//   
function editDataByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).removeAttr("readonly");
}
//   
function saveByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).attr("readonly","readonly");
}

위 에서 우 리 는 표를 삭제, 편집, 저장 등 조작 을 했 고 구체 적 인 조작 내용 은 수요 에 따라 조정 할 수 있다.(사실은 나중에 저 는 전체적인 num 이 필요 하지 않 고 추가 줄 에 대한 조작 도 실현 할 수 있다 는 것 을 알 게 되 었 습 니 다. 어떻게 실현 하 는 지 에 대해 서 는 주로 js 의 조작 이 고 시간 이 있 으 면 다시 연구 하 세 요)
이로써 우리 가 동적 으로 표를 만 드 는 페이지 코드 는 끝났다.전편 에서 우 리 는 표를 어떻게 동적 으로 생 성 하 는 지 에 대해 이야기 했다. 이어서 우 리 는 표 의 여러 가지 데 이 터 를 어떻게 얻 고 배경 서버 에 제출 하 는 지 에 대해 이야기 했다.
개발 하기 전에 저도 인터넷 에서 자 료 를 찾 았 습 니 다. 너무 간결 하거나 알 아 볼 수 없 었 습 니 다. 그러나 그들 대부분 은 JSon 방식 으로 여러 개의 인 자 를 배경 으로 전달 하 는 것 을 언급 했 습 니 다. 그러면 저 는 이 사고 에 따라 다음 과 같은 코드 를 작 성 했 습 니 다.
1. 우선 표 의 데 이 터 를 어떻게 얻 는 지, 위의 예 와 결합 하 는 지 살 펴 보 자.

  

    

      

        
  1
        
  2
        
  3
        
  4
        
  5
        
  
      
    
   
   
   
 

Table 탭 의 바깥쪽 에 form 탭 을 추가 하고 form 탭 의 id 를 설정 하 는 것 을 볼 수 있 습 니 다.
2. 다음은 jQuery 의 "serialize ()" 방법 에 따라 표 에 있 는 input 태그 의 인 자 를 가 져 옵 니 다.

var msg = $("#submitForm").serialize();  //    msg  ：canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xxx

3. 표 의 데 이 터 를 가 져 온 후에 우 리 는 그 값 의 형식 에 따라 json 형식의 데이터 로 변환 합 니 다.

var json = "[{";
var msg2 = msg.split("&");   //  “&”      ，    key=value     
var t = false;
for(var i = 0; i

상기 코드 를 통 해 우 리 는 표 의 여러 데 이 터 를 json 형식의 데이터 로 성공 적 으로 변환 했다. 그러면 우 리 는 ajax 방식 으로 JSon 데 이 터 를 배경 으로 보 낼 수 있다.
이로써 우 리 는 표 에 있 는 여러 개의 데 이 터 를 가 져 와 서버 에 제출 한 코드 를 작성 하여 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.