欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年03月09日 09:35:15   作者：北斗星先森  
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價值，有興趣的可以了解一下

在上方文本框填入”姓名/Email/ 年齡”，實(shí)現(xiàn)在下方表格中動態(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">
//    三個文本框
//    一個添加按鈕 按鈕實(shí)現(xiàn)功能 添加信息到表格中
//    一個表格，行數(shù)動態(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() 方法用于在表格中的指定位置插入一個新行
        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)
    {
      //獲取當(dāng)前表格行號
      var i = r.parentNode.parentNode.rowIndex;
      //調(diào)用deleteRow()刪除本行
      document.getElementById('testTble').deleteRow(i);
    }
  </script>

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

相關(guān)文章

  • 實(shí)例詳解JavaScript靜態(tài)作用域和動態(tài)作用域

    實(shí)例詳解JavaScript靜態(tài)作用域和動態(tài)作用域

    作用域是指程序源代碼中定義變量的區(qū)域,作用域規(guī)定了如何查找變量，也就是確定當(dāng)前執(zhí)行代碼對變量的訪問權(quán)限,這篇文章主要給大家介紹了關(guān)于JavaScript靜態(tài)作用域和動態(tài)作用域的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • 微信小程序自定義菜單導(dǎo)航實(shí)現(xiàn)樓梯效果

    微信小程序自定義菜單導(dǎo)航實(shí)現(xiàn)樓梯效果

    在html開發(fā)中，我們可以用到a標(biāo)簽錨點(diǎn)實(shí)現(xiàn)，jq的動畫相結(jié)合實(shí)現(xiàn)類似效果。在框架中vant UI框架也為我們實(shí)現(xiàn)了這一效果。接下來通過本文給大家介紹微信小程序自定義菜單導(dǎo)航實(shí)現(xiàn)樓梯效果，感興趣的朋友一起看看吧
    2021-12-12
  • JavaScript Reflect Metadata實(shí)現(xiàn)詳解

    JavaScript Reflect Metadata實(shí)現(xiàn)詳解

    這篇文章主要介紹了JavaScript Reflect Metadata實(shí)現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • JS文字球狀放大效果代碼分享

    JS文字球狀放大效果代碼分享

    這篇文章主要展示了JS文字球狀放大效果，和放大鏡放大文字一樣，很神奇的代碼，感興趣的小伙伴們可以參考一下
    2015-08-08
  • js驗(yàn)證真實(shí)姓名與身份證號是否匹配

    js驗(yàn)證真實(shí)姓名與身份證號是否匹配

    使用javascript技術(shù)驗(yàn)真實(shí)姓名，要用到unicode字符來匹配，由于中國人的姓名長度一般是在2-4這個范圍內(nèi)，所以重復(fù)匹配{2,4}次。接下來，通過本文給大家分享js驗(yàn)證省份證號與真實(shí)姓名是否匹配，需要的朋友可以參考下
    2015-10-10
  • 前端JS面試中常見的算法問題總結(jié)

    前端JS面試中常見的算法問題總結(jié)

    雖然說在前端很少有機(jī)會接觸到算法，大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見的算法問題，有需要的朋友們可以參考借鑒，下面來一起看看吧。
    2016-12-12
  • 微信小程序下拉框組件使用方法

    微信小程序下拉框組件使用方法

    這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】

    JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】

    這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下
    2020-02-02
  • Bootstrap table兩種分頁示例

    Bootstrap table兩種分頁示例

    這篇文章主要為大家詳細(xì)介紹了Bootstrap table兩種分頁示例，服務(wù)器端分頁和客戶端分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • js實(shí)現(xiàn)根據(jù)文件url批量壓縮下載成zip包

    js實(shí)現(xiàn)根據(jù)文件url批量壓縮下載成zip包

    本文主要介紹了js實(shí)現(xiàn)根據(jù)文件url批量壓縮下載成zip包，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02

最新評論