<!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>
摘自 代俊建的專欄
