JS创建表格完整
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8 />
<title>动态表格</title>
<!-- 增加表格头的样式 -->
<style type="text/css">
#list th{
background-color:#06F;
}
</style>
</head> <body>
<table border="1" align="center" width="500PX">
<thead>
<!-- 创建表格头 -->
<tr id="list">
<th>选中</th>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>地址</th>
<th>操作</th>
</tr>
<!-- 添加全部删除按钮, -->
<tr>
<td ><input type="checkbox" onclick="checkAll(this)" /></td>
<td colspan="6" ><a href="javascript:void(0)" onclick="delAll()">全部删除</a></td>
</tr>
</thead>
<tbody id="listbody"></tbody>
</table>
<!-- 用于画一个横线 -->
<hr/>
<!-- 创建form表单 -->
<form >
<table align="center" border="1" width="300px">
<tr>
<th >编号</th>
<td> <input type="text" id="id" /></td>
</tr>
<tr>
<th>姓名</th>
<td> <input type="text" id="name" /></td>
</th>
<tr>
<th>密码</th>
<td> <input type="text" id="pass" /></td>
</tr>
<tr>
<th>年龄</th>
<td> <input type="text" id="age" /></td>
</tr>
<tr>
<th>住址</th>
<td> <input type="text" id="address" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" align="center" />
<input type="button" value="添加" align="center" onclick="addlist()"/>
</td>
</tr> </table> </form> </body>
<script type="text/javascript">
function addlist(){
//获取用户输入
var id=document.getElementById("id").value;
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
var age = document.getElementById("age").value;
var address = document.getElementById("address").value;
//在上面的列表中添加一行,把内容放在该行1
/*
<tr>
<td><input type="checkbox" name="item"/></td>
<td>1</td>
<td>张三</td>
<td>123456</td>
<td>20</td>
<td>广州天河</td>
<td><a href="javascript:void(0)" onclick="delOne(this)">删除</a></td>
javascript:void(0): 相当于让href属性失效!!
</tr>
*/
//创建一个tr
var tr = document.createElement("tr");
//创建td
var td1 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","checkbox");
input.setAttribute("name","item");
td1.appendChild(input); var td2 = document.createElement("td");
td2.innerHTML = id; var td3 = document.createElement("td");
td3.innerHTML = name; var td4 = document.createElement("td");
td4.innerHTML = pass; var td5 = document.createElement("td");
td5.innerHTML = age; var td6 = document.createElement("td");
td6.innerHTML = address; var td7 = document.createElement("td");
var a = document.createElement("a"); a.setAttribute("href","javascript:void(0)");//相当于让href属性失效!
a.setAttribute("onclick","delone(this)")
a.innerHTML = "删除";
td7.appendChild(a);
//将创建的td添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
//使用appendChild(tr)方法,将tr添加到listbody中
//其中获取的listbody是要将表格添加的位置的id
var listbody = document.getElementById("listbody");
listbody.appendChild(tr); }
//删除单行
function delone(d){
var tr = d.parentNode.parentNode;
var listbody = document.getElementById("listbody");
listbody.removeChild(tr); }
//全选 function checkAll(c){
//得到全选按钮的状态
var status = c.checked;
//得到name=item的标签
var items = document.getElementsByName("item");
for(var i=0;i<items.length;i++){
//将全选按钮的状态给所有的items
items[i].checked=status; }
}
//删除选中部分,注意变量,每删除一个,要将变量减一,否则,将导致变量溢出,浏览器死机
function delAll(){ var list = document.getElementById("listbody");
//拿到所有的item
var items = document.getElementsByName("item");
for(var j=0;j<items.length;j++){ if(items[j].checked)//如果item被选中
{ var tr = items[j].parentNode.parentNode;
list.removeChild(tr);
j--;
}
}
} </script>
</html>
JS创建表格完整的更多相关文章
- 如何用js创建表格?
1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...
- js创建表格
js创建一个表格,其中的表头已经有了,要从json中读取的数据一行一行地创建表格 function create_table(data){ tableNode = document.getElemen ...
- 使用JS创建表格以及隔行换色(包括隔N行换色)
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- 一段完整的创建表格的SQL代码
一段完整的创建表格的SQL代码 使用SQL语句创建一张表,不仅可以可以快速熟悉SQL语句,还可以从这看出一个人对该技能点的熟悉程度. 这里先说明几点: PRIMARY KEY:主键,一张表中只允许有一 ...
随机推荐
- windows 端 nginx怎么配置 虚拟机的fastdfs文件管理系统
FastDFS的安装这里不演示 nginx.conf #图片服务 upstream img_server_pool{ server 192.168.133.131:80 weight=10; } #学 ...
- [Luogu P3825] [NOI2017] 游戏 (2-SAT)
[Luogu P3825] [NOI2017] 游戏 (2-SAT) 题面 题面较长,略 分析 看到这些约束,应该想到这是类似2-SAT的问题.但是x地图很麻烦,因为k-SAT问题在k>2的时候 ...
- Elasticsearch7.X 入门学习第一课笔记----基本概念
原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...
- Spark Streaming 单词计数
Receiver 从数据源接收数据,然后把数据存储在内存中供spark streaming使用,在本地运行spark streaming不能设置master为local或者local[1],此时运行的 ...
- nginx读取请求体
请求体的读取一般发生在nginx的content handler中,一些nginx内置的模块,比如proxy模块,fastcgi模块,uwsgi模块等,这些模块的行为必须将客户端过来的请求体(如果有的 ...
- JVM 运行时数据区域划分
目录 前言 什么是JVM JRE/JDK/JVM是什么关系 JVM执行程序的过程 JVM的生命周期 JVM垃圾回收 JVM的内存区域划分 一.运行时数据区包括哪几部分? 二.运行时数据区的每部分到底存 ...
- python在类中使用__slot__属性
在类中定义__slot__属性来限制实例的属性字段,在创建大量对象的场合可以减少内存占用. 创建大量对象是内存占用对比: 类中不使用__slot__ class MySlot:def __init__ ...
- html中的块级元素和行内元素
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...
- 03SQL语句
数据库是不认识JAVA语言的,但是我们同样要与数据库交互,这时需要使用到数据库认识的语言SQL语句,它是数据库的代码. 结构化查询语言(Structured Query Language)简称SQL, ...
- CSS3弹性盒模型flexbox布局
属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...