Home > Article > Web Front-end > js dynamic operation form

js dynamic operation form

php中世界最好的语言Original: 2018-03-23 10:00:122710browse

This time I will bring you a js dynamic operation form. What are the precautions when using js dynamic operation form? The following is a practical case, let’s take a look.

Regarding adding js to the table line by line, I took the time to sort it out today: Create a new html file (if you don’t have an editor, you can create a demo.txt file, and then change the suffix to demo.html), and put the following Just paste all the code in.

Functions include: adding a row to the table, deleting a row from the table, traversing the table to get values, etc.

Click instructions: Click the Add button to add a row to the table, which can be entered. The Delete button can delete the current row, and other rows will not be affected. Delete or add, the number of each line will automatically change, the package and price are , the content is

<textarea></textarea>,Click to save When pressing the button, all rows in the table are traversed, and the data of all rows are taken out and displayed in a pop-up box. Later, it can be passed to the background for processing according to needs.

Rendering:

Source code:

<!--
  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>

The same is true for other dynamically generated js, you can specify the location according to your needs Create the elements you need.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

js dynamic operation form

Related articles