js は値を 1 行ずつ動的に追加、削除、走査します-jsチュートリアル-php.cn

js は値を 1 行ずつ動的に追加、削除、走査します

小云云

リリース： 2018-01-27 09:36:16

オリジナル

1514 人が閲覧しました

テーブルに 1 行ずつ js を追加することについて、今日は時間をかけて整理しました。新しい HTML ファイルを作成します (エディターがない場合は、demo.txt ファイルを作成して、サフィックスを変更できます)を、demo.html) にコピーし、そこに次のコードをすべて貼り付けます。

関数には、テーブルへの行の追加、テーブルからの行の削除、テーブルを走査して値を取得するなどが含まれます。

クリック手順: [追加] ボタンをクリックしてテーブルに行を追加します。行を追加するには、[削除] ボタンを使用して現在の行を削除できます。他の行は影響を受けません。削除または追加すると、各行の番号が自動的に変更されます。パッケージと価格は、内容は

<textarea></textarea>, 保存ボタンをクリックすると、テーブル内のすべての行を走査して取り出します。ポップアップボックス内のすべての行のデータポップアップ表示は、必要に応じて後で処理するためにバックグラウンドに渡すことができます。

レンダリング:

ソースコード:

<!--
  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動的生成についても同様で、必要に応じて指定された場所に必要な要素を作成できます。