JS는 테이블의 동적 생성을 구현하고 테이블 데이터를 backend_javascript 기술에 제출합니다.

이 글의 예시에서는 테이블을 동적으로 생성하고 테이블 데이터를 백엔드에 제출하는 관련 코드를 소개합니다. 구체적인 내용은 다음과 같습니다.

먼저 요구 사항을 살펴보겠습니다. 웹 페이지에서 테이블을 동적으로 생성하고 테이블의 데이터를 편집한 다음 테이블의 데이터를 저장을 위해 백엔드 서버에 제출합니다.

그럼 가장 먼저 해결해야 할 것은 테이블을 동적으로 생성하는 문제입니다

1. 먼저 JS 라이브러리 파일을 가져와야 합니다.

<script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

2. 그런 다음 필요에 따라 결정할 수 있는 빈 테이블을 미리 페이지에 만듭니다.

<table border="0" style="text-align: center;" width="100%" id="myTable">
 <tr>
  <td width="150px;">表头1</td>
  <td width="150px;">表头2</td>
  <td width="150px;">表头3</td>
  <td width="150px;">表头4</td>
  <td width="150px;">表头5</td>
  <td width="150px;">操作</td>
 </tr>
</table>

3. 테이블이 생성된 후 테이블을 동적으로 생성하기 위한 키 코드를 작성할 수 있습니다.

트리거를 위한 js 메소드를 작성합니다.

var num = 0;
  function addTable(){
    var tableHtml ="";
    tableHtml += '<tr id="tr'+num+'">'
         +'<td><input class="addtd" id="cnashu1'+num+'" style="width:150px;" type="text" name="cnashu1" /></td>'
         +'<td><input class="addtd" id="cnashu2'+num+'" style="width:150px;" type="text" name="cnashu2"/></td>'
         +'<td><input class="addtd" id="cnashu3'+num+'" style="width:150px;" type="text" name="cnashu3"/></td>'
         +'<td><input class="addtd" id="cnashu4'+num+'" style="width:150px;" type="text" name="cnashu4"/></td>'
         +'<td><input class="addtd" id="cnashu5'+num+'" style="width:150px;" type="text" name="cnashu5"/></td>'
         +'<td><a style="cursor: pointer; color: blue;" onclick="removeTr('+num+')">删除</a>'
           +'<a id="edit'+num+'" class="edit" style="cursor: pointer; color: blue;" onclick="editDataByOne('+num+')">修改</a>'
           +'<a id="save'+num+'" class="hide" style="cursor: pointer; color: blue;" onclick="saveByOne('+num+')">保存</a>'
         +'</td>'
         +'</tr>';
    
    var elements = $("#myTable").children().length;  //表示id为“mtTable”的标签下的子标签的个数
    
    $("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行
    num++;   
  }

주로 사용자 입력 매개변수를 제공하는 데 사용되는 태그에 태그를 추가한 것을 볼 수 있으며, 추가된 각 매개변수의 ID를 구분하기 위해 주로 전역 변수 num이 사용됩니다. 독특함으로 인해 존재합니다.

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");
}

위 표에는 삭제, 편집, 저장 등의 작업이 포함되어 있으며, 구체적인 작업 내용은 필요에 따라 조정될 수 있습니다. (실제로 전역 숫자가 필요하지 않고 행을 추가하는 연산도 구현할 수 있다는 사실을 나중에 발견했습니다. 구현 방법은 주로 일부 js 연산입니다. 시간이 나면 연구해 보겠습니다.)

이 시점에서 동적으로 테이블을 생성하는 페이지 코드가 완성되었습니다.
글의 전반부에서는 테이블을 동적으로 생성하는 방법에 대해 이야기했습니다. 다음에는 에서 여러 데이터를 얻는 방법에 대해 설명하겠습니다. 테이블을 백엔드 서버에 제출합니다.

저도 개발하기 전에 인터넷에서 몇 가지 정보를 찾았는데, 너무 간결하거나 이해하기 어려운 내용이었는데 대부분 Json을 사용하여 여러 매개변수를 백그라운드로 전달한다는 내용이 있어서 이 아이디어를 바탕으로 작성했습니다. .

1. 먼저 테이블에서 데이터를 구하는 방법이나 위의 예시와 결합해 보겠습니다

<div>
  <form id="submitForm">
    <table border="0" style="text-align: center;" width="100%" id="myTable">
      <tr>
        <td width="150px;">表头1</td>
        <td width="150px;">表头2</td>
        <td width="120px;">表头3</td>
        <td width="120px;">表头4</td>
        <td width="80px;">表头5</td>
        <td width="100px;">操作</td>
      </tr>
    </table>
   </form>
   <input type="button" value="添加" onclick="addTable();">
   <input type="button" value="提交" onclick="save();">
 </div>

Table 태그 외부에 form 태그를 추가하고 form 태그의 id를 설정한 것을 확인할 수 있습니다.

2. 다음으로 jQuery의 "serialize()" 메소드에 따라 입력 태그의 매개변수를 양식으로 가져옵니다

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<msg2.length; i++){
  var msg3 = msg2[i].split("=");  //再以“=”进行分割，得到key，value形式的数组
  for(var j = 0; j<msg3.length; j++){
    json+="\""+msg3[j]+"\"";
    if(j+1 != msg3.length){
      json+=":";
    }
    if(t){
      json+="}";
      if(i+1 != msg2.length){  //表示是否到了当前行的最后一列
        json+=",{";
      }
      t=false;
    }
    if(msg3[j] == "canshu5"){  //这里的“canshu5”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input
      t = true;
    }
  }
  if(!msg2[i].match("canshu5")){  //同上
    json+=";";
  }
          
}
json+="]";
//最终msg的值就被转换为：[{"key":"value"；"key":"value"},{"key":"value"；"key":"value"}]格式的json数据<br />

위 코드를 통해 테이블의 여러 데이터를 json 형식 데이터로 성공적으로 변환한 다음 ajax를 통해 처리하기 위해 Json 데이터를 백그라운드로 보낼 수 있습니다.

이 시점에서 여러 데이터를 양식으로 가져와 서버에 제출하는 코드 작성이 완료되었습니다. 이것이 모든 사람의 학습에 도움이 되기를 바랍니다.