js動的操作フォーム-jsチュートリアル-php.cn

js動的操作フォーム

php中世界最好的语言

リリース： 2018-03-23 10:00:12

オリジナル

2759 人が閲覧しました

今回はjs動的操作フォームについてご紹介します。js動的操作フォームを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

テーブルに 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('tbodyid').children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById('tbodyid').removeChild(objtr);
    var tbody=document.getElementById('tbodyid');
    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('tbodyid');
    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動的生成についても同様で、必要に応じて指定された場所に必要な要素を作成できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQueryコードの最適化方法のまとめ

Node.jsの非対称暗号化の詳しい説明

360ブラウザ互換モードで不完全なページ表示に対処する方法

inline-block要素のデフォルトの間隔をクリア

以上がjs動的操作フォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。