<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#form1 {
width: 480px;
border: 1px solid #eee;
border-radius: 5px;
margin: 30px auto;
padding: 10px;
line-height: 30px;
position: relative;
}
#tab1 {
width: 500px;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 5px;
}
tr {
cursor: pointer;
}
tbody tr td:first-child {
text-align: center;
}
input[type="checkbox"] {
width: 15px;
height: 15px;
}
input[type="button"] {
position: absolute;
right: 10px;
bottom: 10px;
}
#div1 {
position: relative;
width: 480px;
padding: 10px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
function getChecked(form,name)
{
var arr = [];
for (var i = 0; i < form[name].length; i++)
{
if(form[name][i].checked)
{
arr.push(form[name][i].value)
}
}
if(form[name][0].type == 'radio')
{
return arr[0];
}
if(form[name][0].type == 'checkbox')
{
return arr;
}
};
</script>
<script type="text/javascript">
window.onload = function ()
{
var data = [
{'name': '赵一', 'sex': '男', 'age': '35'},
{'name': '钱二', 'sex': '女', 'age': '28'},
{'name': '孙三', 'sex': '男', 'age': '15'},
{'name': '李四', 'sex': '男', 'age': '48'},
{'name': '周五', 'sex': '男', 'age': '36'},
{'name': '武六', 'sex': '女', 'age': '49'},
{'name': '郑七', 'sex': '女', 'age': '75'},
{'name': '王九', 'sex': '男', 'age': '17'},
]; var otab = document.getElementById('tab1');
var obody = otab.tBodies[0];
var oform = document.getElementById('form1');
var oall = document.getElementById('checkAll');
var odelet = document.getElementById('delete'); for( var i = 0; i < data.length; i++)
{
var otr = document.createElement('tr'); var otd = document.createElement('td');
otd.innerHTML = '<input type="checkbox">'
otr.appendChild(otd); var otd = document.createElement('td');
otd.innerHTML = data[i].name;
otr.appendChild(otd); var otd = document.createElement('td');
otd.innerHTML = data[i].sex;
otr.appendChild(otd); var otd = document.createElement('td');
otd.innerHTML = data[i].age;
otr.appendChild(otd); obody.appendChild(otr); colorline();
} checkbox();
oform.add.onclick = function ()
{
arr = [];
arr[0] = oform.name.value;
arr[1] = getChecked(oform,'sex');
arr[2] = oform.age.value; for(var i = 0; i < arr.length; i++ )
{
var otr = document.createElement('tr');
var otd = document.createElement('td');
otd.innerHTML = '<input type="checkbox">'
otr.appendChild(otd); for(var i = 0; i < arr.length; i++)
{
var otd = document.createElement('td');
otd.innerHTML = arr[i];
otr.appendChild(otd);
}
}
obody.appendChild(otr);
oform.reset();
colorline();
checkbox();
}; function colorline()
{
for( var i = 0; i < obody.rows.length; i++ )
{
if(i%2)
{
obody.rows[i].style.background = '#fff';
}
else
{
obody.rows[i].style.background = 'pink';
} }
}; function checkbox()
{
for(var i = 0; i < obody.rows.length; i++ )
{
obody.rows[i].onclick = function ()
{
this.cells[0].children[0].checked = this.cells[0].children[0].checked == false?true:false;
check();
} obody.rows[i].cells[0].children[0].onclick = function ()
{
this.checked = this.checked == false ? true:false;
check();
}
}
} otab.tHead.onclick = function ()
{
oall.checked = oall.checked == false ? true: false;
checkall();
}; oall.onclick = function ()
{
this.checked = this.checked == false ? true:false;
checkall();
} function checkall()
{
for( var i = 0; i < obody.rows.length; i++ )
{
obody.rows[i].cells[0].children[0].checked = oall.checked;
}
}; function check()
{
for( var i = 0; i < obody.rows.length; i++)
{
if(!obody.rows[i].cells[0].children[0].checked)
{
oall.checked = false;
return;
}
}
oall.checked = true;
} odelet.onclick = function ()
{
oall.checked = false;
for(var i = 0; i < obody.rows.length; i++ )
{
if(obody.rows[i].cells[0].children[0].checked)
{
obody.removeChild(obody.rows[i])
i--;
}
}
colorline();
}
}
</script>
</head> <body>
<form id="form1">
请输入姓名:<input type="text" name="name"><br>
请选择性别:<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>
请输入年龄:<input type="text" name="age"><br>
<input type="button" value="添加到表格" name="add">
</form>
<table id="tab1">
<thead>
<tr>
<th width="20%"><input type="checkbox" id="checkAll" id="checkAll"/> 全选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="div1">
<input type="button" value="删除所选行" id="delete">
</div>
</body>
</html>

dom 动态生产表格的更多相关文章

  1. DOM动态添加表格

    var table=document.createElement("table"); table.border=1; var b=document.createElement(&q ...

  2. Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  3. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  4. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  5. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  7. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  8. javascript动态创建表格:新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. java 反编译插件 JD-Eclipse 和 JD-IntelliJ

    去官网 : http://jd.benow.ca/ 找到 JD-Eclipse 和  JD-IntelliJ,下载,前者安在eclipse上,后者安在as上.

  2. 【Python】如何安装easy_install?

    [Python]如何安装easy_install? http://jingyan.baidu.com/article/b907e627e78fe146e7891c25.html easy_instal ...

  3. R语言串行与并行Apply用法

    串行 APPLY<- function(m){ mTemp <- apply(m, 2, mysort) return(mTemp)} snowfall包的并行 SNOWFALL<- ...

  4. 51nod1476 括号序列的最小代价

    这题应该可以用费用流写吧?不过我想不出贪心来TAT.其实还是单调队列乱搞啊T_T //ÍøÉϵÄÌ°ÐÄËã·¨ºÃÉñ°¡¡£¡£¡£ÎÒÖ»»áÓÃ×îС·ÑÓÃ×î´óÁ÷ÅÜTAT #in ...

  5. UIImagePicker照片选择器

    UIImagePickerController 1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType ...

  6. yum 一些命令

    1)列出相关rpm包 yum list mysql* 2)使用指定源 yum --enablerepo=remi install [package] 3)卸载rpm包 yum remove mysql ...

  7. gcc与g++

    gcc和g++都是GNU(组织)的一个编译器. 误区一:gcc只能编译c代码,g++只能编译c++代码两者都可以,但是请注意:1.后缀为.c的,gcc把它当作是C程序,而g++当作是c++程序:后缀为 ...

  8. android中handler用法总结

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  9. ecshop 无限分类解析(转)

    对ecshop无限级分类的解析,认真分析后发现真的其算法还是比较精典的其实并不难理解,有举例方便大家理解 function cat_options($spec_cat_id, $arr) { stat ...

  10. 多核模糊C均值聚类

    摘要: 针对于单一核在处理多数据源和异构数据源方面的不足,多核方法应运而生.本文是将多核方法应用于FCM算法,并对算法做以详细介绍,进而采用MATLAB实现. 在这之前,我们已成功将核方法应用于FCM ...