Maison > Article > interface Web > js ajoute, supprime et parcourt dynamiquement les valeurs ligne par ligne

js ajoute, supprime et parcourt dynamiquement les valeurs ligne par ligne

小云云original: 2018-01-27 09:36:161517parcourir

Concernant l'ajout de js au tableau ligne par ligne, j'ai pris le temps de faire le tri aujourd'hui : Créez un nouveau fichier html (si vous n'avez pas d'éditeur, vous pouvez créer un fichier demo.txt, puis modifier le suffixe à demo.html), et collez tous les codes suivants. Entrez simplement.

Les fonctions incluent : ajouter une ligne au tableau, supprimer une ligne du tableau, parcourir le tableau pour obtenir des valeurs, etc.

Instructions de clic : cliquez sur le bouton Ajouter pour ajouter une ligne au tableau pour la saisie, et sur le bouton Supprimer pour supprimer la ligne actuelle sans affecter les autres lignes. Supprimez ou ajoutez, le numéro de chaque ligne changera automatiquement. Le forfait et le prix sont 0f0306f9b187f2e363126bc29c8b1420, et le contenu est

4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014, Lorsque vous cliquez sur le bouton Enregistrer, il parcourra tous les lignes du tableau et enregistrez toutes les lignes. Les données sont extraites et affichées dans une boîte contextuelle, qui peut être passée en arrière-plan pour un traitement ultérieur en fonction des besoins.

Rendu :

Code source :

<!--
  Creator： WangPeng
  CreateTime : 2018-01-25
  去年今日此门中，人面桃花相映红。
  人面不知何处去，桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态增加表格</title>
</head>
<style>
  td /*设置表格文字左右和上下居中对齐*/
  {
    vertical-align: middle;
    text-align: center;
    padding: 9px;
  }
  textarea{
    min-height: 60px;
    min-width: 200px;
  }
</style>
<script type="text/javascript">
  function del(obj){
    if(document.getElementById(&#39;tbodyid&#39;).children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById(&#39;tbodyid&#39;).removeChild(objtr);
    var tbody=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbody.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbody.children[i].children[0].innerHTML=i+1;
    }
    }
    else{
      alert("请不要全部删除");
    }
  }
  function add(){
  var trid = new Date().getTime();
  var packageid=trid+&#39;packageid&#39;;
  var countid=trid+&#39;countid&#39;;
  var priceid=trid+&#39;priceid&#39;;
  var objtr=document.createElement(&#39;tr&#39;);
  objtr.id=trid;
  objtr.innerHTML="<td></td> " +
    "      <td><input id=&#39;"+trid+"packageid&#39;></td> " +
    "      <td><textarea id=&#39;"+trid+"countid&#39;></textarea></td> " +
    "      <td><input id=&#39;"+trid+"priceid&#39;></td> " +
    "      <td><button type=&#39;button&#39; onclick=&#39;del(this)&#39;>删除</button></td>";
    document.getElementById("tbodyid").appendChild(objtr);
    var tbodyobj=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbodyobj.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbodyobj.children[i].children[0].innerHTML=i+1;
    }
  }
  function save(){
    var tbodyobj=document.getElementById(&#39;tbodyid&#39;);
    var countchildren=tbodyobj.childElementCount;
    var trid="";
    var packageid="";
    var countid="";
    var priceid="";
    var list=new Array();
    for (var i=0;i<countchildren;i++){
      trid=tbodyobj.children[i].id;
      packageid=trid+"packageid";
      countid=trid+"countid";
      priceid=trid+"priceid";
      var map={
      "套餐":document.getElementById(packageid).value,
      "内容":document.getElementById(countid).value,
      "价格":document.getElementById(priceid).value
      }
      list.push(map);
    }
    console.log("list:",list);
    alert(JSON.stringify(list));
  }
</script>
<body>
<p>
  <p style="width: 80%;margin: 10%">
  <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
    <caption>动态增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序号</th>
      <th width="20%">套餐</th>
      <th width="30%">内容</th>
      <th width="10%">价格</th>
      <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbodyid">
    <tr id="123">
      <td>1</td>
      <td><input id="123packageid"></td>
      <td><textarea id="123countid"></textarea></td>
      <td><input id="123priceid"></td>
      <td><button type="button" onclick=&#39;del(this)&#39;>删除</button></td>
    </tr>
    </tbody>
  </table>
    <button type="button" onclick=&#39;add()&#39;>添加</button>
    <button type="button" onclick=&#39;save()&#39;>保存</button>
</p>
</p>
</body>
</html>

js génère dynamiquement d'autres Dans le de la même manière, vous pouvez créer les éléments dont vous avez besoin à l'emplacement spécifié en fonction de vos besoins.

Recommandations associées :

Exemple de méthode pour ajouter dynamiquement des éléments de formulaire à l'aide de JavaScript

JQuery pour implémenter un ajout dynamique simple , Exemple de fonction de suppression de table

Exemple détaillé d'implémentation simple de jQuery pour ajouter dynamiquement de nouveaux éléments à la liste

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!

Déclaration：

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

Article précédent：Comment implémenter la fonction de compression d'image de l'applet WeChatArticle suivant：Comment implémenter la fonction de compression d'image de l'applet WeChat

Articles Liés

Voir plus