집 > 기사 > 웹 프론트엔드 > js는 값을 한 줄씩 동적으로 추가, 삭제 및 순회합니다.

js는 값을 한 줄씩 동적으로 추가, 삭제 및 순회합니다.

小云云원래의: 2018-01-27 09:36:161497검색

테이블에 js를 한줄씩 추가하는 것에 대해서는 오늘 정리하는 시간을 가졌습니다. 새로운 html 파일을 생성하세요. (편집기가 없으면 데모.txt 파일을 생성한 후 접미사를 변경하시면 됩니다. 데모.html)에 다음 코드를 모두 붙여넣습니다.

기능에는 테이블에 행 추가, 테이블에서 행 삭제, 테이블을 순회하여 값 가져오기 등이 포함됩니다.

클릭 지침: 입력할 수 있는 행을 테이블에 추가하려면 추가 버튼을 클릭하세요. 삭제 버튼을 사용하면 현재 행을 삭제할 수 있으며 다른 행은 영향을 받지 않습니다. 삭제하거나 추가하면 각 행의 번호가 자동으로 변경되며 패키지 및 가격은 , 내용은

4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014,저장 버튼을 클릭하면 테이블의 모든 행을 순회하여 꺼냅니다. 팝업 상자에 있는 모든 행의 데이터 팝업 표시는 필요에 따라 나중에 처리하기 위해 배경으로 전달될 수 있습니다.

Rendering:

소스 코드:

<!--
  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 동적 생성의 경우에도 마찬가지입니다. 필요에 따라 지정된 위치에 필요한 요소를 만들 수 있습니다.

js는 값을 한 줄씩 동적으로 추가, 삭제 및 순회합니다.

관련 기사