javascript sort table & merge same column

最新推荐文章于 2024-07-24 16:20:17 发布

besily

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量782

点赞数

分类专栏： js 文章标签： table javascript merge textbox function button

js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

说明：
appendChild()
我测试的结果：
1 appendChild() 表格中所有行循环上移一行后，用新的（行）替换了表格的末行；相当于替换了表格的第一行，并循环上移一行
2 不改变表格的总行数

insertRow()
1 insertRow() 在表格中插入一行，表格总行书增一
2 insertRow(index) index=0 , 在表头增加， index=-1, 在表尾增加。

deleteRow()
1 deleteRow(0) 删除表头第一行，第二行变为第一行；因此删除表头前n行，可以循环n次调用deleteRow(0)

Example: Sort table & Merge same Column

1。 Break Table: 遍历表格，如果排序列的某TD包含多个值，需要拆分为多行（使用insertRow(-1)； index=-1是因为便利过程使用原有表格的行数进行遍历，若在表头插入行则遍历失效）

2。 Sort Table：

a,将表格中的代排序行保存到数组ArrayOrig中，
b: 排序数组ArrayOrig
c:遍历数组ArrayOrig，合并相同列，生成ArrayDest（注意合并过程中需要保证状态，属性符合需求）
d: 遍历ArrayDest，使用appendChild() 添加到表格中。

3。 Delete Table：因为appendChild()不会改变表格行数，因此适用 count=ArrayOrig.length - ArrayDest.length 循环调用deleteRow(0)删除表前count行

以下为网上的一些资料：
http://zxjava.javaeye.com/blog/193926

1、inserRow()和insertCell()函数

insertRow(index)：index从0开始

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow(index)：index从0开始

删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row=document.getElementById("Row_Id");
var index=row.rowIndex;
objTable.deleteRow(index);

删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

function clearRow(){
objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}

这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：

function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i<length; i++ )
{
objTable.deleteRow(i);
}
}

3、动态设置单元格与行的属性

A、采用setAttribute()方法，格式如下：setAttribute(属性，属性值)

说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：1

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//为表格设置边框为1

其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//为单元格设置高度为24

在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用 setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

B、直接赋值

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//为表格设置边框为1

4、创建表格

了解了行<tr>与单元格<td>的增删那就可以创建表格了。

第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的

var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");

这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧~

<!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>蓝光-BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//添加一行
var newTr = testTbl.insertRow(testTbl.rows.length);
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>

<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td >第1行</td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value="插入行" οnclick="addRow()" />
</label>
</body>
</html>

5、appendChild()方法

我就直接贴代码了，大家去研究，时间紧，哈哈，见谅~

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

besily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript sort table & merge same column

说明：appendChild()我测试的结果： 1 appendChild() 表格中所有行循环上移一行后，用新的（行）替换了表格的末行；相当于替换了表格的第一行，并循环上移一行2 不改变表格的总行数insertRow()1 insertRow() 在表格中插入一行，表格总行书增一 2 insertRow(index) index=0 , 在表头增加， index=-1, 在表尾增加。d
复制链接

扫一扫

专栏目录