집 > 기사 > 웹 프론트엔드 > JavaScript 동적 테이블 추가 및 삭제 구현에 대한 자세한 소개

JavaScript 동적 테이블 추가 및 삭제 구현에 대한 자세한 소개

黄舟원래의: 2017-03-21 14:46:381351검색

이 글에서는 테이블에 데이터를 추가하고 삭제하는 기능을 구현할 수 있는 JavaScript를 주로 소개합니다. 🎜>

위 텍스트 상자에 "이름/이메일/나이"를 입력하면 아래 표의 셀을 동적으로 추가하거나 삭제할 수 있습니다.

효과:

JavaScript 동적 테이블 추가 및 삭제 구현에 대한 자세한 소개

1 . HTML 코드:

<body>
<p align="center" id="info">
  姓名 : <input type="text" id = "username"> 
  Email : <input type="text" id = "email"> 
  年龄 : <input type="text" id = "age"> 
</p>

<p align="center"><input type="button" value="添加" onclick="addRow()"></p>
<hr>
<table align="center" border="1" id = "testTble" style="width: 60%;text-align: center;border:1px solid lightgreen">
  <tr>
    <td>姓名</td>
    <td>Email</td>
    <td>年龄</td>
    <td>操作</td>
  </tr>
</table>

2. 자바스크립트 코드:

 <script type="text/javascript">
//    三个文本框
//    一个添加按钮 按钮实现功能 添加信息到表格中
//    一个表格，行数动态增加的

    function addRow()
    {
    // 获取input元素节点数组
      var inputNodes = document.getElementsByTagName("input");

      var str = new String(inputNodes[0].value);
      var str1 = new String(inputNodes[1].value);
      var str2 = new String(inputNodes[2].value);
      if ((str.length > 0) && (str1.length > 0) && (str2.length > 0))
      {
        //添加一行 insertRow() 方法用于在表格中的指定位置插入一个新行
        var newTr = testTble.insertRow();
        //添加四列 sertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        var newTd2 = newTr.insertCell();
        var newTd3 = newTr.insertCell();
        //分别给每一列赋值

        newTd0.innerText= inputNodes[0].value;
        newTd1.innerText= inputNodes[1].value;
        newTd2.innerText= inputNodes[2].value;
        newTd3.innerHTML = "<input type=&#39;button&#39; value=&#39;删除&#39; onclick=&#39;deleteTable(this)&#39;>";
      }
      else
      {
        alert("请先把信息填写完整！");
        return;
      }
    }
    function deleteTable(r)
    {
      //获取当前表格行号
      var i = r.parentNode.parentNode.rowIndex;
      //调用deleteRow()删除本行
      document.getElementById(&#39;testTble&#39;).deleteRow(i);
    }
  </script>

위 내용은 JavaScript 동적 테이블 추가 및 삭제 구현에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript+bootstrap+html은 계층적 다중 선택 상자에서 전체 레이어 선택 및 다중 선택 기능의 코드 예제를 구현합니다.다음 기사：JavaScript+bootstrap+html은 계층적 다중 선택 상자에서 전체 레이어 선택 및 다중 선택 기능의 코드 예제를 구현합니다.