bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JavaScript實現動態(tài)增刪表格的方法

在上方文本框填入”姓名/Email/ 年齡”，實現在下方表格中動態(tài)添加或刪除單元格

站在用戶的角度思考問題，與客戶深入溝通，找到麟游網站設計與麟游網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網站建設、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、申請域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋麟游地區(qū)。

效果：

JavaScript實現動態(tài)增刪表格的方法

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>

<div align="center"><input type="button" value="添加" onclick="addRow()"></div>
<hr>
<table align="center" border="1" id = "testTble" >
  <tr>
    <td>姓名</td>
    <td>Email</td>
    <td>年齡</td>
    <td>操作</td>
  </tr>
</table>

2. JavaScript代碼：

 <script type="text/javascript">
//    三個文本框
//    一個添加按鈕 按鈕實現功能 添加信息到表格中
//    一個表格，行數動態(tài)增加的

    function addRow()
    {
    // 獲取input元素節(jié)點數組
      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='button' value='刪除' onclick='deleteTable(this)'>";
      }
      else
      {
        alert("請先把信息填寫完整！");
        return;
      }
    }
    function deleteTable(r)
    {
      //獲取當前表格行號
      var i = r.parentNode.parentNode.rowIndex;
      //調用deleteRow()刪除本行
      document.getElementById('testTble').deleteRow(i);
    }
  </script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。

當前標題：JavaScript實現動態(tài)增刪表格的方法
瀏覽地址：http://vcdvsql.cn/article10/poogdo.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站制作、標簽優(yōu)化、ChatGPT、品牌網站設計、微信小程序、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

微信小程序開發(fā)