这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
这篇文章主要介绍了 js 动态添加表格数据并使用 insertRow 和 insertCell 实现, 需要的朋友可以参考下
代码: js 动态添加表格数据_2.html
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- js动态添加表格数据_2 使用insertRow和insertCell方法实现
- </title>
- <script type="text/javascript">
- var mailArr = [{
- "title": "一个c#问题",
- "name": "张三",
- "date": "2014-03-21"
- },
- {
- "title": "一个javascript问题",
- "name": "李四",
- "date": "2014-03-21"
- },
- {
- "title": "一个c问题",
- "name": "五五",
- "date": "2014-03-21"
- },
- {
- "title": "一个c++问题",
- "name": "赵六",
- "date": "2014-03-21"
- }];
- var tab = null;
- window.onload = function() {
- loadTab();
- //全选
- document.getElementById("selA").onclick = function() {
- if (document.getElementById("selA").checked == true) {
- seleAll(tab, true);
- } else {
- seleAll(tab, false);
- }
- };
- //删除所有的选中的
- document.getElementById("delSel").onclick = function() {
- //遍历所有的input控件即可(除了最后一个全选用的checkbox)
- var chks = document.getElementsByTagName('input');
- for (var i = chks.length - 2; i >= 0; i--) {
- var chk = chks[i];
- if (chk.checked == true) {
- //选中行删除处理
- var rowNow = chk.parentNode.parentNode;
- rowNow.parentNode.removeChild(rowNow);
- } else {
- alert("really");
- }
- }
- };
- };
- function loadTab() {
- tab = document.getElementById("tb");
- //把mailArr循环遍历方式以tr的方式加入表格中
- for (var rowindex = 0; rowindex < mailArr.length; rowindex++) {
- //var tr = tab.insertRow(-1);//-1指最后一行
- var tr = tab.insertRow(tab.rows.length - 1); //插入到末二行,最后一行要给全选那一行保留着
- var td1 = tr.insertCell( - 1);
- td1.innerHTML = "<input type='checkbox'/>";
- var td2 = tr.insertCell( - 1);
- td2.innerHTML = mailArr[rowindex].title;
- var td3 = tr.insertCell( - 1);
- td3.innerHTML = mailArr[rowindex].name;
- var td4 = tr.insertCell( - 1);
- td4.innerHTML = mailArr[rowindex].date;
- }
- }
- //要使全选按钮生效,就要遍历所有的表格的行
- function seleAll(mailTab, isSel) {
- for (var i = 0; i < mailTab.rows.length; i++) {
- var tr = mailTab.rows[i];
- tr.cells[0].childNodes[0].checked = isSel;
- }
- }
- </script>
- </head>
- <body>
- <table id="tb" border="1" style="border-collapse: collapse;">
- <tr>
- <th>
- 序列
- </th>
- <th>
- 标题
- </th>
- <th>
- 发邮人
- </th>
- <th>
- 发件时间
- </th>
- </tr>
- <!-- 循环增加 -->
- <!--全选 -->
- <tr>
- <td colspan="4">
- <input id="selA" type="checkbox" />
- <label for="selA">
- 全选
- </label>
- <a href="#" id="delSel">
- 删除
- </a>
- </td>
- </tr>
- </table>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0623/275869.html