快捷導(dǎo)航

JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法

更新時(shí)間：2017年03月09日 09:35:15 作者：北斗星先森

本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下

在上方文本框填入”姓名/Email/ 年齡”，實(shí)現(xiàn)在下方表格中動(dòng)態(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" style="width: 60%;text-align: center;border:1px solid lightgreen">
  <tr>
    <td>姓名</td>
    <td>Email</td>
    <td>年齡</td>
    <td>操作</td>
  </tr>
</table>

2. JavaScript代碼：

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

    function addRow()
    {
    // 獲取input元素節(jié)點(diǎn)數(shù)組
      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() 方法用于在表格中的指定位置插入一個(gè)新行
        var newTr = testTble.insertRow();
        //添加四列 sertCell() 方法用于在 HTML 表的一行的指定位置插入一個(gè)空的 <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("請(qǐng)先把信息填寫完整！");
        return;
      }
    }
    function deleteTable(r)
    {
      //獲取當(dāng)前表格行號(hào)
      var i = r.parentNode.parentNode.rowIndex;
      //調(diào)用deleteRow()刪除本行
      document.getElementById('testTble').deleteRow(i);
    }
  </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
表格

相關(guān)文章

JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制當(dāng)前網(wǎng)址
在大量的網(wǎng)站都有這樣的功能，當(dāng)點(diǎn)擊一個(gè)按鈕的時(shí)候可以復(fù)制當(dāng)前頁(yè)面的地址，以此可以方便網(wǎng)站用戶對(duì)鏈接的存儲(chǔ)，同時(shí)也便于網(wǎng)站的推廣，下面給大家分享具體實(shí)現(xiàn)代碼，對(duì)js實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法,涉及javascript表格節(jié)點(diǎn)樣式及鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
巧用數(shù)組制作圖片切換js代碼
這篇文章主要為大家詳細(xì)介紹了巧用數(shù)組制作圖片切換js實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
js中判斷變量類型函數(shù)typeof的用法總結(jié)
下面小編就為大家?guī)?lái)一篇js中判斷變量類型函數(shù)typeof的用法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
利用JS提交表單的幾種方法和驗(yàn)證(必看篇)
下面小編就為大家?guī)?lái)一篇利用JS提交表單的幾種方法和驗(yàn)證(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
Bootstrap Table 刪除和批量刪除
這篇文章主要介紹了Bootstrap Table 刪除和批量刪除的相關(guān)資料,需要的朋友可以參考下
2017-09-09
Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來(lái)越重要，如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型，術(shù)語(yǔ)稱作 Deferred 模式，它通過(guò)一組API來(lái)規(guī)范化異步操作，讓異步操作的流程控制更加容易。
2014-05-05
JavaScript轉(zhuǎn)換農(nóng)歷類實(shí)現(xiàn)及調(diào)用方法
農(nóng)歷是日常生活中不可或缺的一部分，它與人類的生活息息相關(guān)，從某種程度上說(shuō)，它一直伴隨著我們，今天的任務(wù)是JavaScript轉(zhuǎn)換農(nóng)歷類的實(shí)現(xiàn)，感興趣的你可以千萬(wàn)不要錯(cuò)過(guò)，希望本文對(duì)你有所幫助
2013-01-01
相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08