快捷導(dǎo)航

JavaScript實現(xiàn)簡單動態(tài)表格

更新時間：2020年12月02日 13:47:10 作者：少女總裁、

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單動態(tài)表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡單動態(tài)表格的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動態(tài)表格</title>

  <style>
    table{
      border: 1px solid;
      margin: auto;
      width: 500px;
    }

    td,th{
      text-align: center;
      border: 1px solid;
    }
    div{
      text-align: center;
      margin: 50px;
    }
  </style>

</head>
<body>

<div>
  <input type="text" id="id" placeholder="請輸入編號">
  <input type="text" id="name" placeholder="請輸入姓名">
  <input type="text" id="gender" placeholder="請輸入性別">
  <input type="button" value="添加" id="btn_add">

</div>


  <table id="table">
    <caption>學(xué)生信息表</caption>
    <tr>
      <th>編號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>操作</th>
    </tr>

    <tr>
      <td>1</td>
      <td>武大郎</td>
      <td>男</td>
      <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="delTr(this);">刪除</a></td>
    </tr>

    <tr>
      <td>2</td>
      <td>西門慶</td>
      <td>男</td>
      <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow"  onclick="delTr(this);">刪除</a></td>
    </tr>

    <tr>
      <td>3</td>
      <td>武二郎</td>
      <td>男</td>
      <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow"  onclick="delTr(this);">刪除</a></td>
    </tr>


  </table>



<script>
  
  //1.獲取btn
  var btn_add = document.getElementById("btn_add");
  //2.綁定單擊事件
  btn_add.onclick = function(){
    //獲取每一個輸入框內(nèi)容
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;

    //獲取表格
    var table = document.getElementById("table");
    //創(chuàng)建tr
    var tr = document.createElement("tr");
    //創(chuàng)建td
    var td_id = document.createElement("td");
    var text_id = document.createTextNode(id);
    td_id.appendChild(text_id);
    tr.appendChild(td_id);

    var td_name = document.createElement("td");
    var text_name = document.createTextNode(name);
    td_name.appendChild(text_name);
    tr.appendChild(td_name);

    var td_gender = document.createElement("td");
    var text_gender = document.createTextNode(gender);
    td_gender.appendChild(text_gender);
    tr.appendChild(td_gender);

    var td_option = document.createElement("td");

    var a = document.createElement("a");
    a.setAttribute("href","javascript:void(0);");
    a.setAttribute("onclick","delTr(this)");
    var text_a = document.createTextNode("刪除");
    a.appendChild(text_a);
    td_option.appendChild(a);
    tr.appendChild(td_option);
    table.appendChild(tr);
  }
  function delTr(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
  }
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)移動端上的觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)移動端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-03-03
JavaScript實現(xiàn)表單驗證案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)表單驗證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
Javascript的&&和||的另類用法
這篇文章主要介紹了Javascript的&&和||的另類用法,需要的朋友可以參考下
2014-07-07
微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置頁面標(biāo)題的方法【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置頁面標(biāo)題的方法,涉及微信小程序button組件事件綁定及頁面元素屬性動態(tài)設(shè)置相關(guān)實現(xiàn)技巧,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下
2017-11-11
你真的了解BOM中的history對象嗎
你真的了解BOM中的history對象嗎？具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
js+canvas實現(xiàn)簡單掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)簡單掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
Javascript 高性能之遞歸，迭代，查表法詳解及實例
這篇文章主要介紹了Javascript 高性能之遞歸，迭代，查表法詳解及實例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
這篇文章主要介紹了四種js面向?qū)ο蟮某Ｒ妼懛ǎ€介紹了有關(guān)this的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下
2016-02-02