Cet article présente principalement jquery pour implémenter des tables modifiables et générer des résultats json. Les fonctions d'analyse et de chargement de code sont implémentées avec du front-end js, ce qui simplifie la logique du code back-end. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
L'effet d'implémentation est le suivant. Lors de la modification du formulaire, le contenu du champ json peut être automatiquement modifié. Cliquez sur Soumettre pour l'enregistrer en arrière-plan. Lorsque la page est chargée, le json est automatiquement analysé et le tableau. le contenu est chargé. Les fonctions d'analyse et de chargement du code sont implémentées à l'aide de js front-end, ce qui simplifie la logique du code back-end.
Définir l'entête du tableau à opérer :
<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>
Définir le code opération
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('input').eq(0).val(); var v2 = tdArr.eq(0).find('input').eq(1).val(); var v3 = tdArr.eq(2).find('input').val(); var v4 = tdArr.eq(1).find('input').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); }
Recommandations associées :
jQuery (non-HTML5) implémentation de table modifiable code_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!