Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de jQuery implémentant des tables modifiables et générant des résultats json

小云云
Libérer: 2017-12-31 16:38:53
original
1760 Les gens l'ont consulté

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>
Copier après la connexion

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(&#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); 
}
Copier après la connexion

Recommandations associées :

jQuery implémente étape par étape des tables modifiables entre navigateurs, prenant en charge IE, Firefox, Safari, Chrome, Opera_jquery

Utilisez Jquery pour implémenter des tables modifiables et utilisez AJAX pour soumettre au serveur afin de modifier data_jquery

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal