JavaScript创建表格的两种方式

时间:2022-06-24 01:47:47

方式一:

        var data =
[
{ id: 1, name: "first", age: 12 },
{ id: 2, name: "second", age: 13 },
{ id: 3, name: "three", age: 12 },
{ id: 4, name: "fore", age: 13 },
]; //原始的创建表格方式
window.onload=function()
{
var tableAdd = document.createElement("table")
tableAdd.id = "table1";
tableAdd.className = "table1";
document.getElementById("divTest").appendChild(tableAdd); for(var i=0;i<data.length;i++)
{
var rowData = data[i];
var newRow = document.createElement("tr");
tableAdd.appendChild(newRow); var newCol0 = document.createElement("td");
newRow.appendChild(newCol0);
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
newCol0.appendChild(checkBox); var newCol = document.createElement("td");
//双标签有inner属性,表示可以设置内容
newCol.innerHTML = rowData.id;
newRow.appendChild(newCol); var newCol2 = document.createElement("td");
//双标签有inner属性,表示可以设置内容
newCol2.innerHTML = rowData.name;
newRow.appendChild(newCol2); var newCol3 = document.createElement("td");
//双标签有inner属性,表示可以设置内容
newCol3.innerHTML = rowData.age;
newRow.appendChild(newCol3);
}
var lastRow = document.createElement("tr");
tableAdd.appendChild(lastRow);
var lasttd1 = document.createElement("td");
lasttd1.colSpan = 4;
lasttd1.innerHTML = "<input type='checkbox'/> 全选 <a href='#'>删除</a>";
lastRow.appendChild(lasttd1);
} </script>
</head>
<body>
<div id="divTest" style="border:1px solid #ffd800; width:1000px;height:1200px;">
</div>
</body>
</html>

效果图如下:

JavaScript创建表格的两种方式

方式二:

 <style type="text/css">
.table1
{
border:1px solid #00ff21;
width:200px;
height:200px;
margin:10px auto; /*margin 设置 auto可以使居中显示*/
border-collapse:collapse; /*将td之间的空隙合并*/
}
.table1 td
{
border:1px solid #00ff21;
padding:4px;
}
.chk{ }
</style>
<script type="text/javascript" language="JavaScript"> //只有表格才有的创建方式
window.onload = function () {
var tableAdd = document.createElement("table")
tableAdd.id = "table1";
tableAdd.className = "table1";
document.getElementById("divTest").appendChild(tableAdd); for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var newRow = tableAdd.insertRow(-1);//-1表示在表格最后追加一行,参数代表要插入行的位置
newRow.insertCell(-1).innerHTML = "<input type='checkbox' class='chk'/>";
var newCol = newRow.insertCell(-1);//单元格已经添加导航中,并且返回单元格引用
//innerHTML是设置双标签的内容字符串,并且会自动解析HTML
newCol.innerHTML = rowData.id;
newRow.insertCell(-1).innerHTML = rowData.name;
newRow.insertCell(-1).innerHTML = rowData.age;
} var lastRow = tableAdd.insertRow(-1);
var lastCol = lastRow.insertCell(-1);
lastCol.colSpan = 4;
lastCol.innerHTML = "<input type='checkbox' id='checkAll'/> 全选 <a href='javascript:del()'>删除</a>";
document.getElementById("checkAll").onclick = allCheck;
} /*实现全选*/
function allCheck()
{
var res = document.getElementById("checkAll").checked;
var chks = document.getElementsByClassName("chk");
for(var i=0;i<chks.length;i++)
{
//为所有复选框的选中状态赋值:把全选复选框的选中状态设置给他们
chks[i].checked = res;
}
} /*实现删除*/
function del()
{
var chks = document.getElementsByClassName("chk");
for(var i=0;i<chks.length;i++)
{
var chk = chks[i];
if(chk.checked)
{
//获取复选框所在的行对象
var trObj = chk.parentNode.parentElement;
//通过行对象的父元素 删除行对象 因为删除只能通过父元素来删
trObj.parentElement.removeChild(trObj);
}
}
} var data =
[
{ id: 1, name: "first", age: 12 },
{ id: 2, name: "second", age: 13 },
{ id: 3, name: "three", age: 12 },
{ id: 4, name: "fore", age: 13 },
];

效果图如下:

JavaScript创建表格的两种方式

JavaScript创建表格的两种方式的更多相关文章

  1. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

  2. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  3. &period;NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  4. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  5. 创建TabHost的两种方式的简单分析

    最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTa ...

  6. 创建线程的两种方式比较Thread VS Runnable

    1.首先来说说创建线程的两种方式 一种方式是继承Thread类,并重写run()方法 public class MyThread extends Thread{ @Override public vo ...

  7. ubuntu创建用户的两种方式

    ubuntu创建用户有两种方式: useradd和adduser 这两者,就像零件与产品的关系.useradd是DIY,需要自己调配,adduser是品牌机,拿来就能用. 对于创建一般用户来讲,use ...

  8. Spring创建JobDetail的两种方式

    一.Spring创建JobDetail的两种方式 二.整合方式一示例步骤 1.将spring核心jar包.quartz.jar和Spring-context-support.jar导入类路径. 2.编 ...

  9. Java并发基础01&period; 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

随机推荐

  1. CE STEPLDR

    作用:初始化CPU.内存.Flash,复制EBoot到内存并跳入EBoot中运行. 原理:S3C2416有 8-KB 的steppingstone(暂时翻译为垫脚石),在Nand启动模式下可把Nand ...

  2. PHP 单引号和双引号的区别

    $a = 'jfdjaff';$b = '234125';$c = '"jj $a $b"'.PHP_EOL;echo $c;$c = 'jj $a $b'.PHP_EOL;ech ...

  3. &lbrack;BZOJ 3209&rsqb; 花神的数论题 【数位统计】

    题目链接: BZOJ - 3209 题目大意 设 f(x) 为 x 的二进制表示中 1 的个数.给定 n ,求 ∏ f(i)     (1 <= i <= n) . 题目分析 总体思路是枚 ...

  4. javascript实现模仿迅雷电影评分

    效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. C&num; 引用参数

    最近经常和同事讨论引用参数的问题,为了搞清楚,查了些资料,其中CLR via C#中讲的比较清楚,整理了下 ----摘自(CLR via C#) 在默认情况下,CLR假设所有的方法参数都是按值传递的. ...

  6. Kafka官方文档翻译——实现

    IMPLEMENTATION 1. API Design Producer APIs Producer API封装了底层两个Producer: kafka.producer.SyncProducer ...

  7. Spring,SpringMvc配置常见的坑,注解的使用注意事项,applicationContext&period;xml和spring&period;mvc&period;xml配置注意事项,spring中的事务失效,事务不回滚原因

    1.Spring中的applicationContext.xml配置错误导致的异常 异常信息: org.apache.ibatis.binding.BindingException: Invalid ...

  8. 【BZOJ 1701】Cow School(斜率优化&sol;动态凸包&sol;分治优化)

    原题题解和数据下载 Usaco2007 Jan 题意 小牛参加了n个测试,第i个测试满分是\(p_i\),它的得分是\(t_i\).老师去掉\(t_i/p_i\)最小的d个测试,将剩下的总得分/总满分 ...

  9. linux 查找并kill进程

    以php以关键字查找进程 $ ps aux | grep php root             32957   0.0  0.1  2470904   8908 s002  S+    4:53下 ...

  10. &lbrack;luogu4265&rsqb;&lbrack;USACO18FEB&rsqb;Snow Boots silver

    题目大意 求出最少需要丢去多少双靴子才能到达终点. 解法 解法一: 看到数据的范围,非常清楚\(O(n^3)\)能过掉所有的数据,那么我们就果断暴力. 解法二: 比较容易会想到用DP做,我一开始定义\ ...