用js实现动态添加删除表格数据

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta  charset = "UTF-8">
<title>table</title >
<style>
table {margin:auto;width: 60%;border: 1px solid black;border-collapse: collapse;
}table caption {color: blue;font: 34px consolas bold;
}table th, table td {border: 1px solid black;text-align:center;
}table th {font: 20px consolas bold;background-color: gray;
}table tr:nth-child(n+2){background-color: cyan;
}table tr:nth-child(2n+2)  {background-color: red;
}
</style>
<script>
var data = [{id: "001", fullname: "张三", sex: "男", score: [98,33,48]},{id: "002", fullname: "李四", sex: "w", score: [11,22,33]},{id: "003", fullname: "kyo", sex: "m", score: [22,33,55]},{id: "004", fullname: "yamazaki", sex: "w", score: [99, 100, 80]}
];var Student = function (id, fullname, sex, score)
{this.id = id;this.fullname = fullname;this.sex = sex;this.score = score;
}var Score = function (chinese, math, english)
{this.chinese = chinese;this.math = math;this.english = english;
}var students = [];
for (var i = 0; i <data.length; i++)
{var d = data[i];var s = d["score"];students.push(new Student (d["id"], d["fullname"], d["sex"], new Score(s[0], s[1], s[2])));
}onload = function ()
{var table = document.createElement("table");var tbody = document.createElement("tbody");table.appendChild(tbody);var caption = table.createCaption();caption.innerHTML = "学生成绩表";var tr = tbody.insertRow (0);var str = "学号,姓名,性别,语文,数学,英语,操作".split(",");for (var i = 0; i <str.length; i++){var th = document.createElement("th");th.innerHTML = str[i];tr.appendChild (th);}for (var i = 0; i <students.length; i++){var tr = tbody.insertRow (tbody.rows.length);var obj = students[i];for (var p in obj){var op = obj[p];if (p != "score"){var td = tr.insertCell (tr.cells.length);td.innerHTML = op;}else{for (var p in op){var td = tr.insertCell (tr.cells.length);td.innerHTML = op[p];}}}//下面为每行末尾添加删除按钮        var delCell = document.createElement('td');//创建操作列  tr.appendChild(delCell);  var btnDel = document.createElement('input'); //创建一个input控件  btnDel.setAttribute('type','button'); //type="button"  btnDel.setAttribute('value','删除');   btnDel.setAttribute('onclick', 'delRow(this)');delCell.appendChild(btnDel);  //把删除按钮加入td，别忘了 }document.body.appendChild(table);
}//删除操作  function delRow(obj){if(confirm("确定删除这一行嘛？")){  //找到按钮所在行的节点，然后删掉这一行  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  //btnDel - td - tr - tbody - 删除(tr)  //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除  }  }</script>
<body ></body>
</html>

用js实现动态添加删除表格数据相关推荐

通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
js 动态添加 tabel 表格
js 动态添加 tabel 表格代码 <!DOCTYPE html> <html><head><title> new document </t ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
Ajax实现动态及时刷新表格数据
大家好,我是雄雄,今天分享的技术很简单,即ajax结合jdbc动态实现及时刷新表单数据. 前言:相信大家在网上冲浪的时候,肯定会发现这样的场景,在实现某个查询功能时,下方表格中会显示需要展示的结果,当 ...
jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
android仿微信发布动态功能,Android GridView扩展仿微信微博发图动态添加删除图片功能.pdf...
Android GridView扩扩展展仿仿微微信信微微博博发发图图动动态态添添加加删删除除图图片片功功能能这篇文章主要为大家详细介绍了Android GridView扩展仿微信微博发图动态添加删除 ...
动态添加/删除HTML元素
动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...

用js实现动态添加删除表格数据

用js实现动态添加删除表格数据相关推荐

最新文章

热门文章