<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态表格</title>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>
<p>
<input type="button" name="Submit" value="刷新" onclick="onRefresh()" />
<input type="button" name="Submit2" value="全选" onclick="selectall()"/>
<input type="button" name="Submit8" value="反选" onclick="inverse()" />
<input type="button" name="Submit3" value="不选" onclick="noselect()"/>
<input type="button" name="Submit4" value="添加行与列" onclick="insert_row()" />
<input type="button" name="Submit7" value="删除选择" onclick="delRow()" />
<input type="button" name="Submit5" value="拷贝选择" onclick="copyRow()"/>
<input type="button" name="Submit92" value="居中对齐" onclick="tableAlign()"/>
<input type="button" name="Submit922" value="隔行变色" onclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">
<tr>
<td width="7%">
<label>
<input type="checkbox" name="checkbox" value="checkbox" />
</label> </td>
<td width="51%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox3" value="checkbox" /></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox4" value="checkbox" /></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox5" value="checkbox" /></td>
<td>5</td>
<td colspan="2">55</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox6" value="checkbox" /></td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>56</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox7" value="checkbox" /></td>
<td>777</td>
<td>7</td>
<td>77</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox8" value="checkbox" /></td>
<td>88</td>
<td>8</td>
<td>88</td>
<td>77</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox9" value="checkbox" /></td>
<td>999</td>
<td>99</td>
<td>99</td>
<td>999</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox10" value="checkbox" /></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
<br />
<p></p>
<script type="text/javascript">
var form = document.forms["form1"];
var table = document.getElementById("myTable");
var selectBox = table.getElementsByTagName("input");
var tr = table.getElementsByTagName("tr");
var clicked = true;
function insert_row(){
//alert(table.rows[0].cells.length)
var thisrow = table.insertRow(0);
var thiscell = thisrow.insertCell(0);
thiscell.innerHTML = "<input type=\"checkbox\" name=\"checkbox10\" value=\"checkbox\" />";
var thiscell1 = thisrow.insertCell(1);
thiscell1.innerHTML = "cell";
var thiscell2 = thisrow.insertCell(2);
thiscell2.innerHTML = "cell";
var thiscell3 = thisrow.insertCell(3);
thiscell3.innerHTML = "cell";
var thiscell4 = thisrow.insertCell(4);
thiscell4.innerHTML = "cell";
thiscell4.align = "center";
}
function insert_Cell(){
var y = table.rows[0].insertCell(0);
y.colSpan="2";
y.innerHTML = "sssss";
}
function selectall(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = true;
}
}
function noselect(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = false;
}
}
function inverse(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
selectBox[i].checked = false;
}else{
selectBox[i].checked = true;
}
}
}
function delRow(){
for(i=selectBox.length-1;i>=0;i--){
//alert(typeof(selectBox[i]));
if(selectBox[i].checked){
table.deleteRow(i);
}
}
}
function onRefresh(){
location.reload();
}
function copyRow(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
//var copytable = document.getElementById("copyTable");
var tablerow = table.insertRow(table.rows.length);
tablerow.innerHTML = table.rows[i].innerHTML;
}
}
}
function tableAlign(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked && clicked){
table.rows[i].align = "center";
}
}
}
function changeColor(){
var skip = true;
for(i=0;i<tr.length;i++){
if(skip){
tr[i].bgColor = "#cccccc";
skip = false;
}else{
tr[i].bgColor = "#ffffff";
skip = true;
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
JS简单表格列表全选反选代码，原生JS，点击表头按钮，实现全选、反选操作，实用的网页代码。
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
实现table表格checkbox复选框的全选 反选.
原生JS表格列表全选反选代码是一款点击表格列表选中，可以单选或者全选。
这是一款原生JS实现的，点击表格列表选中，可以单选、多选、全选和反选的表格列表选择代码。 js代码 [removed] var all = document.getElementById("j_cbAll"); var tbody = document.getElementById("j_...
jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多选。
可以全选反选删除的表格html静态页面，用html、js编写
实现table表格checkbox复选框的全选 反选, 适用于原生table。
spreadjs_列头添加复选框全选功能-demo
JS简单表格列表全选反选代码，原生JS，点击表头按钮，实现全
js 全选反选取消, ASP.NET中url传递中文的解决方案, C#中使用反射显示程序集的所有类型和属性, js怎么取表格中的某一行的值, SQL Server 查询分析器快捷键集合, URLRewrite能够对URL进行重写,失败的原因
js checkbox全选 反选 取消全部设置表单html复选框勾选
主要介绍了vue2.0在table中实现全选和反选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery表格行全选反选
主要介绍了javascript实现可全选、反选及删除表格的方法,实例展示了javascript针对表格全选、反选、删除、隔行变色、删除提示等常用技巧,非常具有实用价值,需要的朋友可以参考下
jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多
js表格列表选择删除是一款原生js table表格列表全选反选和表格列表删除代码。
原生JS表格列表全选反选代码是一款点击表格列表选中，可以单选或者全