javascript中对表格的操作:创建表格 删除行 删除列 交换行 交换列
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<style type="text/css">
input[type=text]{
width:30px;
}
</style>
<script type="text/javascript">
/*
* javascript中对表格的操作:创建表格 删除行 删除列 交换行 交换列
*/
function creatTable(){
//获取页面中原有的table
var oldTable = document.getElementsByTagName("table")[0];
if(oldTable != null)
document.body.removeChild(oldTable);
// 获取行数和列数
var rows = document.getElementById("creatRows").value;
var cols = document.getElementById("creatCols").value;
document.getElementById("creatRows").value = "";
document.getElementById("creatCols").value = "";
//创建Table标签,设置属性
var table = document.createElement("table");
table.setAttribute("border", "1");
table.setAttribute("align", "center");
table.setAttribute("width", "50%");
table.setAttribute("cellpadding", "5");
table.setAttribute("cellspacing", "0");
//alert(table);
//创建Tbody,添加到table中
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i = 1; i <= rows; i++){
//创建tr,添加到tbody中
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var j = 1; j <= cols; j++){
//创建td,设置td的文本,添加到tr中
var td = document.createElement("td");
td.innerHTML = i + ", " + j;
tr.appendChild(td);
}
}
//将table装入body中
document.body.appendChild(table);
}
function deleteRow(){
//获取行号
var rows = document.getElementById("deleteRows").value;
document.getElementById("deleteRows").value = "";
//获取页面中要删除的那个tr,如果不存在,给个提示
var tr = document.getElementsByTagName("tr")[rows - 1];
if(tr == null){
alert("要删除的不存在!");
return;
}
//将tr删除
tr.parentNode.removeChild(tr);
}
function deleteCol(){
//获取要删除的列数,删除后,清空text的值
var cols = document.getElementById("deleteCows").value;
document.getElementById("deleteCows").value = "";
//获取所有的tr,删除每个tr中的cols列
var trARR = document.getElementsByTagName("tr");
for(var i = 0; i < trARR.length; i++){
var td = trARR[i].childNodes[cols - 1];
trARR[i].removeChild(td);
}
}
function swapRow(){
//获取要交换的行号
var row1 = document.getElementById("swapRow1").value;
var row2 = document.getElementById("swapRow2").value;
document.getElementById("swapRow1").value ="";
document.getElementById("swapRow2").value = "";
//获取要交换的tr
var trArr = document.getElementsByTagName("tr");
var tr1 = trArr[row1 - 1];
var tr2 = trArr[row2 - 1];
//使用javascript写好的交换方法
//tr1.swapNode(tr2);
var cloneTr = tr1.cloneNode(true); //交换位置,交换会失败,替换后,会少一行
tr2.parentNode.replaceChild(cloneTr, tr2); //???
tr1.parentNode.replaceChild(tr2, tr1);
}
function swapCol(){
// 获取要交换的列号
var cols1 = document.getElementById("swapCol1").value;
var cols2 = document.getElementById("swapCol2").value;
document.getElementById("swapCol1").value = "";
document.getElementById("swapCol2").value = "";
// 获取所有TR, 循环遍历所有TR
var trArr = document.getElementsByTagName("tr");
for(var x = 0; x < trArr.length; x++) {
// 获取要交换的TD
var td1 = trArr[x].childNodes[cols1 - 1]; // 获取TR的所有子节点
var td2 = trArr[x].cells[cols2 - 1]; // 获取TR中所有单元格
// 交换
td1.swapNode(td2);
}
}
</script>
</head>
<body>
创建的行数:<input type="text" id="creatRows"><br>
创建的列数:<input type="text" id="creatCols"><br>
<input type="button" value="创建表格" onclick="creatTable()"><br>
<br>
要删除的行:<input type="text" id="deleteRows"><input type="button" value="删除行" onclick="deleteRow()"><br>
要删除的列:<input type="text" id="deleteCows"><input type="button" value="删除列" onclick="deleteCol()"><br>
<br>
要交换的行:<input type="text" id="swapRow1">, <input type="text" id="swapRow2"><input type="button" value="交换行" onclick="swapRow()"><br>
要交换的列:<input type="text" id="swapCol1">, <input type="text" id="swapCol2"><input type="button" value="交换列" onclick="swapCol()"><br>
</body>
</html>
