js ajoute, supprime et parcourt dynamiquement les valeurs ligne par ligne-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-27 09:36:16

original

1513 Les gens l'ont consulté

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 , et le contenu est

<textarea></textarea>, 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>

Copier après la connexion

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!