js操作表格的一些简单方法
2012-12-28 16:25
621 查看
<!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>
<title>Untitled Page</title>
<meta
http-equiv="Content-Type" content="text/html; charset=GB2312">
<script
language="javascript" type="text/javascript">
<!--
//创建表格
var table_node=document.createElement("table");
//创建TBody
var tbody_node=document.createElement("tbody");
function ButtonCreatTable_onclick()
{
//得到 行 和 列
var rows=parseInt(document.getElementById("Text_row").value);
var cols=parseInt(document.getElementById("Text_columns").value);
//得到 Div id="tableAppear"
var table_div=document.getElementById("tableAppear");
table_div.appendChild(table_node);
tbody_node.id="tablebody";
table_node.appendChild(tbody_node);
// loop to add all the <tr>
for(var
row_index=1;row_index<=rows;row_index++)
{
var tr_node=document.createElement("tr");
tbody_node.appendChild(tr_node);
for(var
col_index=1;col_index<=cols;col_index++)
{
var td_node=document.createElement("td");
tr_node.appendChild(td_node);
var td_text=document.createTextNode("Row:
"+row_index+"
Col: "+col_index);
td_node.appendChild(td_text);
}
}
}
function innser_Tr()
{
if(document.getElementById("tableAppear").hasChildNodes())
//有孩子
{
var reference_row=parseInt(document.getElementById("Text_insert").value);
var reference_node=tbody_node.childNodes[reference_row-1];
var new_tr_node=document.createElement("tr");
var insert_node=tbody_node.insertBefore(new_tr_node,reference_node);
var cols=reference_node.childNodes.length;
for(var
col_index=1;col_index<=cols;col_index++)
{
var td_node=document.createElement("td");
new_tr_node.appendChild(td_node);
var td_text=document.createTextNode("Row:
"+reference_row+"
Col: "+col_index);
td_node.appendChild(td_text);
}
}
else
alert("请点击创建表格！");
}
function ButtonReplace_onclick()
{
if(document.getElementById("tableAppear").hasChildNodes())
//有孩子
{
var cloneTable=table_node.cloneNode(true);
//复制表格
var reptable=document.getElementById("replaceTable");
document.getElementById("replaceDiv").replaceChild(cloneTable,reptable);
//替换到当前位置
}
else
alert("请点击创建表格！");
}
function ButtonDel_onclick()
{
if(document.getElementById("tableAppear").hasChildNodes())
{
var delrow=parseInt(document.getElementById("Text_del").value);
var del_node=tbody_node.childNodes[delrow-1];
tbody_node.removeChild(del_node);
}
else
alert("请点击创建表格！");
}
// -->
</script>
</head>
<body>
<form
id="from1">
<input id="ButtonCreat" style="width: 148px"
type="button" value="创建表格" onclick="ButtonCreatTable_onclick()"
/>
行:
<input id="Text_row" type="text"
value="2"/>
列：
<input id="Text_columns" type="text"
value="3"/>
<br />
<br />
表格出现在这里：<br
/>
<div id="tableAppear">
</div>
<br />
<br />
<br />
<input id="Button1" style="width: 206px"
type="button" value="在任意行前增加一行" onclick="innser_Tr()"
/>
任意行：<input
id="Text_insert" type="text" value="1"
/><br />
<br />
<br />
<br />
<input id="ButtonDel" type="button"
value="删除任意行" style="width: 200px" language="javascript" onclick="return
ButtonDel_onclick()" />
任意行：<input
id="Text_del" type="text" value="2"
/>
<br />
<br />
<br />
<input id="ButtonReplace" style="width: 200px"
type="button" value="取代子接点" language="javascript" onclick="return
ButtonReplace_onclick()" />
<div id="replaceDiv">
<table id="replaceTable">
<tr>
<td width=30%>1</td>
<td width=35%>2</td>
<td width=35%>3</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>Untitled Page</title>
<meta
http-equiv="Content-Type" content="text/html; charset=GB2312">
<script
language="javascript" type="text/javascript">
<!--
//创建表格
var table_node=document.createElement("table");
//创建TBody
var tbody_node=document.createElement("tbody");
function ButtonCreatTable_onclick()
{
//得到 行 和 列
var rows=parseInt(document.getElementById("Text_row").value);
var cols=parseInt(document.getElementById("Text_columns").value);
//得到 Div id="tableAppear"
var table_div=document.getElementById("tableAppear");
table_div.appendChild(table_node);
tbody_node.id="tablebody";
table_node.appendChild(tbody_node);
// loop to add all the <tr>
for(var
row_index=1;row_index<=rows;row_index++)
{
var tr_node=document.createElement("tr");
tbody_node.appendChild(tr_node);
for(var
col_index=1;col_index<=cols;col_index++)
{
var td_node=document.createElement("td");
tr_node.appendChild(td_node);
var td_text=document.createTextNode("Row:
"+row_index+"
Col: "+col_index);
td_node.appendChild(td_text);
}
}
}
function innser_Tr()
{
if(document.getElementById("tableAppear").hasChildNodes())
//有孩子
{
var reference_row=parseInt(document.getElementById("Text_insert").value);
var reference_node=tbody_node.childNodes[reference_row-1];
var new_tr_node=document.createElement("tr");
var insert_node=tbody_node.insertBefore(new_tr_node,reference_node);
var cols=reference_node.childNodes.length;
for(var
col_index=1;col_index<=cols;col_index++)
{
var td_node=document.createElement("td");
new_tr_node.appendChild(td_node);
var td_text=document.createTextNode("Row:
"+reference_row+"
Col: "+col_index);
td_node.appendChild(td_text);
}
}
else
alert("请点击创建表格！");
}
function ButtonReplace_onclick()
{
if(document.getElementById("tableAppear").hasChildNodes())
//有孩子
{
var cloneTable=table_node.cloneNode(true);
//复制表格
var reptable=document.getElementById("replaceTable");
document.getElementById("replaceDiv").replaceChild(cloneTable,reptable);
//替换到当前位置
}
else
alert("请点击创建表格！");
}
function ButtonDel_onclick()
{
if(document.getElementById("tableAppear").hasChildNodes())
{
var delrow=parseInt(document.getElementById("Text_del").value);
var del_node=tbody_node.childNodes[delrow-1];
tbody_node.removeChild(del_node);
}
else
alert("请点击创建表格！");
}
// -->
</script>
</head>
<body>
<form
id="from1">
<input id="ButtonCreat" style="width: 148px"
type="button" value="创建表格" onclick="ButtonCreatTable_onclick()"
/>
行:
<input id="Text_row" type="text"
value="2"/>
列：
<input id="Text_columns" type="text"
value="3"/>
<br />
<br />
表格出现在这里：<br
/>
<div id="tableAppear">
</div>
<br />
<br />
<br />
<input id="Button1" style="width: 206px"
type="button" value="在任意行前增加一行" onclick="innser_Tr()"
/>
任意行：<input
id="Text_insert" type="text" value="1"
/><br />
<br />
<br />
<br />
<input id="ButtonDel" type="button"
value="删除任意行" style="width: 200px" language="javascript" onclick="return
ButtonDel_onclick()" />
任意行：<input
id="Text_del" type="text" value="2"
/>
<br />
<br />
<br />
<input id="ButtonReplace" style="width: 200px"
type="button" value="取代子接点" language="javascript" onclick="return
ButtonReplace_onclick()" />
<div id="replaceDiv">
<table id="replaceTable">
<tr>
<td width=30%>1</td>
<td width=35%>2</td>
<td width=35%>3</td>
</tr>
</table>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- table表格js简单操作隐藏与显示出现结构错乱解决方法
- 利用js事件进行简单的表格操作
- JS实现简单表格排序操作示例
- 简单介绍一些php操作redis常用方法代码例子
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- 下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS也可以实现。
- 使用JS操作页面表格，元素的一些技巧
- js操作表格操方法,增加,删除行，上移,下移一行选定行
- js简单的表格添加行和删除行操作示例
- js操作iframe的一些方法介绍
- Java中Calendar的一些简单操作 及 JS中获取当前时间前一天时间(js中时间Date操作)
- js操作表格操方法,增加,修改,删除，一行记录
- js操作iframe的一些方法介绍
- mongodb的一些基本操作以及c++驱动的简单方法
- js使用DOM操作实现简单留言板的方法
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- 一个简单的上传附件,并显示附件的方法.(JS的DOM操作取得input file的值.)
- LINQ 中数据操作的一些简单方法（删除，更新）
- js 的一些简单方法
- 原生JS取代一些JQuery方法的简单实现