南强小屋 Design By 杰米

本文实例为大家分享了JavaScript实现简单动态表格的具体代码,供大家参考,具体内容如下

JavaScript实现简单动态表格

JavaScript实现简单动态表格

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态表格</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>学生信息表</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(){
    //获取每一个输入框内容
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;

    //获取表格
    var table = document.getElementById("table");
    //创建tr
    var tr = document.createElement("tr");
    //创建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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
js,动态表格

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“JavaScript实现简单动态表格”

暂无JavaScript实现简单动态表格的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。