편집 가능한 테이블을 구현하고 json 결과를 생성하는 jQuery에 대한 자세한 설명

이 글에서는 주로 편집 가능한 테이블을 구현하고 json 결과를 생성하는 jquery를 소개합니다. 코드 구문 분석 및 로딩 기능은 모두 프론트 엔드 js로 구현되어 백엔드 코드 로직을 단순화하고 참조 로딩이 매우 좋습니다. 필요하면 모두에게 도움이 되길 바랍니다.

구현 효과는 다음과 같습니다. 양식을 편집하는 동안 필드 json 콘텐츠가 자동으로 변경될 수 있습니다. 제출을 클릭하면 페이지가 로드될 때 json이 자동으로 구문 분석되고 테이블 콘텐츠가 로드됩니다. 코드 구문 분석 및 로딩 기능은 백엔드 코드 로직을 단순화하는 프런트엔드 js를 사용하여 구현됩니다.

작업할 테이블 헤더 정의:

<input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name="scorerange"/> 
                      <table id="mytable"> 
                          <tr> 
                            <th style="width: 20%;">分数区间</th><th style="width:20%;">等级</th><th style="width:60%;">建议内容</th><th></th> 
                       </tr> 
                         <!--                         <tr><td><input onblur="caljson()" type="text" style="width: 50px;" >-<input type="text" style="width: 50px;" /></td> 
                          <td><input onblur="caljson()" type="text" style="width: 100%;" ></td> 
                          <td><input onblur="caljson()" id="btn1" type="button" onclick="$(this).parent().parent().remove()" value="删除" /></td></tr>                        -->                       </table>

작업 코드 정의

function insertRowLast(newrow,s1,s2,s3,s4) { 
  if(newrow){ 
    var newRow = "<tr><td><input onblur=\"caljson()\" value=\"0\" type=\"text\" style=\"width: 50px;\" >-<input value=\"0\" type=\"text\" style=\"width: 50px;\" /></td>"; 
    newRow+="<td><input  onblur=\"caljson()\"  type=\"text\" style=\"width: 50px;\" ></td>"; 
    newRow+="<td><input maxlength=\"24\" onblur=\"caljson()\"  type=\"text\" style=\"width: 100%;\" ></td>"; 
    newRow+="<td><input  onblur=\"caljson()\"  id=\"btn1\" type=\"button\" onclick=\"$(this).parent().parent().remove();caljson();\" value=\"删除\" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  }else{ 
    var newRow = "<tr><td><input value=\""+s1+"\" onblur=\"caljson()\" type=\"text\" style=\"width: 50px;\" >-<input value=\""+s2+"\" type=\"text\" style=\"width: 50px;\" /></td>"; 
    newRow+="<td><input value=\""+s4+"\"  onblur=\"caljson()\"  type=\"text\" style=\"width: 50px;\" ></td>"; 
    newRow+="<td><input maxlength=\"24\" value=\""+s3+"\"  onblur=\"caljson()\"  type=\"text\" style=\"width: 100%;\" ></td>"; 
    newRow+="<td><input  onblur=\"caljson()\"  id=\"btn1\" type=\"button\" onclick=\"$(this).parent().parent().remove();caljson();\" value=\"删除\" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  } 
  caljson(); 
} 
var json=""; 
function caljson(){ 
 json="{\"scorerange\":["; 
 var idx = 0;  
 var idxlen = $("#mytable").find("tr").length; 
 $("#mytable").find("tr").each(function () { 
  if(idx==0){ 
  idx++; 
    return; 
  } 
　　var tdArr = $(this).children(); 
  var v1 = tdArr.eq(0).find(&#39;input&#39;).eq(0).val(); 
  var v2 = tdArr.eq(0).find(&#39;input&#39;).eq(1).val(); 
  var v3 = tdArr.eq(2).find(&#39;input&#39;).val(); 
  var v4 = tdArr.eq(1).find(&#39;input&#39;).val(); 
  json+="{\"s1\":\""+v1+"\",\"s2\":\""+v2+"\",\"content\":\""+v3+"\",\"classg\":\""+v4+"\"}"; 
  idx++; 
  if(idx!=idxlen){ 
  json+=","; 
  } 
}); 
json+="]}"; 
$("#scorerange").val(json); 
//alert($("#scorerange").val()); 
} 
//alert(1); 
//alert($("#scorerange").val()); 
var dataObj=eval("($!{tbscence.scorerange})"); 
if(dataObj && dataObj.scorerange){ 
 //alert(dataObj.scorerange.length); 
 for(var i=0;i<dataObj.scorerange.length;i++){ 
  var s1 = dataObj.scorerange[i].s1; 
  var s2 = dataObj.scorerange[i].s2; 
  var s3 = dataObj.scorerange[i].content; 
  var s4 = dataObj.scorerange[i].classg; 
  //alert(s1+" "+s2+" "+s3); 
  insertRowLast(false,s1,s2,s3,s4); 
 } 
}else{ 
 insertRowLast(true,0,0,0,0); 
}

관련 권장 사항:

jQuery는 크로스 브라우저 편집 가능한 테이블을 단계별로 구현하고 IE를 지원하며, Firefox , Safari, Chrome, Opera_jquery

Jquery를 사용하여 편집 가능한 테이블을 구현하고 AJAX를 사용하여 서버에 제출하여 data_jquery

jQuery(HTML5가 아닌) 편집 가능한 테이블 구현 code_jquery

를 수정합니다.

위 내용은 편집 가능한 테이블을 구현하고 json 결과를 생성하는 jQuery에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!