您的位置：首页 > Web前端 > JavaScript

js动态新增/删除table表的行和列

2017-05-23 10:49 337 查看

亲测兼容谷歌，360，火狐，IE8

<!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=utf-8" />
<title>javascript删除行和列</title>

<script language="javascript" type="text/javascript">

function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document;
if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
}
if (!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
if (!foundObj && document.getElementById)
foundObj = document.getElementById(theObj); return foundObj;
}

//添加一个列
count = 1;
function AddNewColumn() {
var txtTDLastIndex = findObj("txtTDLastIndex", document);
var columnID = parseInt(txtTDLastIndex.value);

var tab = document.getElementById("tab");
var rowLength = tab.rows.length;
var columnLength = tab.rows[1].cells.length;

for (var i = 0; i < rowLength; i++) {
if (i == 0) {
var oTd = tab.rows[0].insertCell(columnLength);
oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
} else if (i == 1) {//第一列:序号
var oTd = tab.rows[1].insertCell(columnLength);
oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";
} else if (i > 1) {
var oTd = tab.rows[i].insertCell(columnLength);
oTd.id = "column" + columnID;
oTd.innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>";
}
}

}

//添加一个行
var index = 1;
function AddNewRow() {
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);

var tab = findObj("tab", document);
var columnLength = tab.rows[0].cells.length;

//添加行
var newTR = tab.insertRow(tab.rows.length);
newTR.id = "SignItem" + rowID;

for (var i = 0; i < columnLength; i++) {
if (i == 0) {//第一列:序号
newTR.insertCell(0).innerHTML = ++index;
} else if (i > 0 && i < 4) {
newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
}
else if (i >= 4) {
newTR.insertCell(i).innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>";
}
}

//添加列:删除按钮
var lastTd = newTR.insertCell(columnLength);
lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();
}

//删除指定行
function DeleteSignRow(rowid) {
var tab = findObj("tab", document);
var signItem = findObj(rowid, document);

//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;

//删除指定Index的行
tab.deleteRow(rowIndex);

//重新排列序号，如果没有序号，这一步省略
for (i = 2; i < tab.rows.length; i++) {
tab.rows[i].cells[0].innerHTML = i - 1;
}

--index
}

//删除指定列
function DeleteSignColumn(columnId) {
var tab = document.getElementById("tab");
var columnLength = tab.rows[1].cells.length;

//删除指定单元格
for (var i = 0; i < tab.rows.length; i++) {
tab.rows[i].deleteCell(columnId);
}

//重新排列序号，如果没有序号，这一步省略
var column = columnLength - 4;

for (var j = 1; j < column; j++) {
tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";
}

--count;
}

//清空列表
function ClearAllSign() {
//if (confirm('确定要清空所有吗？')) {
index = 0;
var tab = findObj("tab", document);
var rowscount = tab.rows.length;

//循环删除行,从最后一行往前删除
for (i = rowscount - 1; i > 1; i--) {
tab.deleteRow(i);
}

//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";

//预添加一行
AddNewRow();
//}
}
</script>
<style>
table *{border:1px red solid;}
</style>
</head>
<body>
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
<table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"
style="text-align: center">
<tr id="tr1">
<td>

</td>
<td>

</td>
<td>

</td>
<td>

</td>
<td>

</td>
</tr>
<tr id="trHeader">
<td style="background: #D3E6FE">
NO
</td>
<td style="background: #D3E6FE">
试验项目
</td>
<td style="background: #D3E6FE">
检验项目
</td>
<td style="background: #D3E6FE">
标准
</td>
<td style="background: #D3E6FE">
1
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input id='textItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='checkItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='stand0' type='text' style="border: 0px" size='12' />
</td>
<td>
<textarea rows="4" id="" style="width: 150px; height: 40px;"></textarea>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">
<tr>
<td style="background: #D3E6FE">
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增行" onclick="AddNewRow()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增列" onclick="AddNewColumn()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit2" value="全部清空" onclick="ClearAllSign()" />
</td>
<td style="background: #D3E6FE">
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
</td>
</tr>
</table>
</div>
</body>
</html>

效果图为：

结果为:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 动态新增删除行列

相关文章推荐

新的分享

章节导航