html js创建表格,javascript创建表格方式详解
你知道javascript创建表格的方式都有哪些吗?下面要给大家讲到就是这方面的内容,具体介绍了两种创建表格的方式。
方式1:
.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{
}
<
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
{
var rowData = data[i];
var newRow = tableAdd.insertRow(-1); //-1表示在表格最后追加一行,参数代表要插入行的位置
newRow.insertCell(-1)
.innerHTML = "";
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 = " 全选 删除";
document.getElementById("checkAll")
.onclick = allCheck;
}
/*实现全选*/
function allCheck()
{
var res = document.getElementById("checkAll")
.checked;
var chks = document.getElementsByClassName("chk");
for (var i = 0; i
{
//为所有复选框的选中状态赋值:把全选复选框的选中状态设置给他们
chks[i].checked = res;
}
}
/*实现删除*/
function del()
{
var chks = document.getElementsByClassName("chk");
for (var i = 0; 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
}
, ];
方式2: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
{
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 = " 全选 删除";
lastRow.appendChild(lasttd1);
}
<
/head> <
body >
/body> <
/html>
两种创建表格的方式你都了解了吗?更多javascript相关问题,请继续来奇Q工具网的常见问题栏目了解吧。
推荐阅读:
html js创建表格,javascript创建表格方式详解相关推荐
- 用html js制作迷宫,JavaScript生成随机迷宫详解
本篇教程介绍了JavaScript生成随机迷宫详解,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < #先看生成随机迷宫的代码吧↓ 1 2 3 生成随机迷宫v ...
- JavaScript 各种遍历方式详解
为了方便例子讲解,现有数组和json对象如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; v ...
- JS输出内容的五种方式详解
1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...
- JS常用的输出内容的方式详解(5种输出方式)
1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...
- layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解 如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
- php中 继承中的概念,JavaScript_JavaScript中的继承方式详解,js继承的概念
js里常用的如下 - phpStudy...
JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...
- 用idea建立jsp项目_用idea创建maven项目,配置tomcat详解
用idea创建maven项目,配置tomcat详解,电脑上得有jdk1.7,或者1.8,然后就是maven3.x吧,再有就是tomcat7以上 下面就直接开始看图啦: 这个我刚刚开始没注意细看,原来w ...
- python process 函数_Python Process创建进程的2种方法详解
前面介绍了使用 os.fork() 函数实现多进程编程,该方法最明显的缺陷就是不适用于 Windows 系统.本节将介绍一种支持 Python 在 Windows 平台上创建新进程的方法. Pytho ...
- Oracle创建表语句(Create table)语法详解及示例
Oracle创建表语句(Create table)语法详解及示例 创建表(Create table)语法详解 1. ORACLE常用的字段类型ORACLE常用的字段类型有 VARCHAR2 (si ...
- 基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
最新文章
- 高科技的计算机作文,高科技的作文范文400字
- IOCP不可忽视的细节
- python错误修复_如何修复python错误(对象不可调用)
- Automatic Reference Counting
- WSAGetLastError
- pycharm创建我的第一个项目
- FreeModbus TCP传输初始化
- Linux上安装Python3和pip3
- 安卓应用安全指南 4.6.3 处理文件 高级话题
- 再学C++ Primer(9)-类
- php如何定义和使用常量,PHP中如何定义和使用常量_PHP教程
- sql语句截取字符串
- Advanced IP Scanner - 网络扫描器
- 人工智能之父图灵之死:谜一样的解谜者
- 2019/9/10谷歌开发者大会汇总
- MySQL数据库完全备份与恢复
- 【matplotlib】可视化解决方案——共享绘图区域问题
- 活动星投票奋斗青春,使命必达网络评选微信的投票方式线上免费投票
- VMware虚拟机和主机共享文件夹
- Linux下*.tar.gz文件解压缩命令
热门文章
- Power BI DAX: FILTER函数使用多个条件筛选数据
- 批量压缩pdf文件大小,pdf批量压缩步骤
- CAD.net二次开发之图层,文字样式,标注样式,标注封装,引线的封装
- 树莓派python3导入cv2
- openwrt使用tayga/totd实现NAT64/DNS64
- 产品经理必会知识:万字长文 | 史上最全的付费会员体系分析
- python怎么计算复利_用python计算复利和年化收益率
- 学习笔记【机器翻译评测指标】
- 苹果雪豹操作系统_苹果 M1 版 MacBook 软件兼容实测:VS Code、PhotoShop 目前还不能用(附列表)...
- 显示风场的某一局部区域,实现多分辨率