您的位置：首页 > Web前端 > JavaScript
javascript js 删除表格的行、单元列

2010-06-18 14:59 246 查看
动态删除表格的行、列，有点类似于String中的substring函数。不过这里也有开始删除的位置和删除的长度。但是不包括起始位置，用法和substring类似；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tab2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//删除table列：从start列开始删除,共删end列（不包括start）
function removeCells(tab, start, end) {
var rows = tab.rows;
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells;
/*for (var j = 0; j < cells.length; j++) {
if (j >= start && j <= end) {
tab.rows[i].deleteCell(start);
}
}*/
for (var j = 0; j < end; j++) {
tab.rows[i].deleteCell(start);
}
}
}
//删除table行，从start行开始删除，共删end行（不包括start）
function removeRows(tab, start, end) {
var rows = tab.rows;
/*for (var i = 0; i < rows.length; i++) {
if (i >= start && i <= end) {
tab.deleteRow(start);
}
}*/
for (var i = 0; i < end; i++) {
tab.deleteRow(start);
}
}

function deleteCells() {
var tab = document.getElementById("tab");
var start = document.getElementById("startCell").value;
var end = document.getElementById("endCell").value;
if (tab.rows.length > 0) {
var cell = tab.rows[0].cells;
start = start > cell.length ? cell.length : start;
start = start < 0 ? 0 : start;
end = end > cell.length ? cell.length : end;
end = end < 0 ? 0 : end;
}
removeCells(tab, start, end);
}

function deleteRows() {
var tab = document.getElementById("tab");
var start = document.getElementById("startRow").value;
var end = document.getElementById("endRow").value;
start = start > tab.rows.length ? tab.rows.length : start;
start = start < 0 ? 0 : start;
end = end > tab.rows.length ? tab.rows.length : end;
end = end < 0 ? 0 : end;
removeRows(tab, start, end);
}

window.onload = function () {
var showDiv = document.getElementById("show");
var htmlTemplate = "<table id='tab' border='1'>";
for (var i = 0; i < 4; i++) {
htmlTemplate += "<tr>";
for (var j = 0; j < 13; j++) {
htmlTemplate += "<td>" + i + "-" + j + "</td>";
}
htmlTemplate += "</tr>";
}
htmlTemplate += "</table>";
showDiv.innerHTML = htmlTemplate;
}
</script>
</head>
<body>
<input type="text" id="startCell" />
<input type="text" id="endCell" />
<input type="button" value="删除列" onclick="deleteCells()"><br/>
<input type="text" id="startRow" />
<input type="text" id="endRow" />
<input type="button" value="删除行" onclick="deleteRows()">
<div id="show"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航