js 生成表格添加，删除行、列。行，列数据交换

xiaoxiao2021-12-10 27

<!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=UTF-8"> <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; // 获取所有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中所有单元格 // 交换 swapNode(td1,td2); } } function swapNode(node1,node2) { var _parent=node1.parentNode; var _t1=node1.nextSibling; var _t2=node2.nextSibling; if(_t1) _parent.insertBefore(node2,_t1); else _parent.appendChild(node2); if(_t2) _parent.insertBefore(node1,_t2); else _parent.appendChild(node1); } </script> </head> <body> 创建的行数:<input type="text" id="creatRows"><br> 创建的列数:<input type="text" id="creatCols"><br> <input type="button" value="创建表格" οnclick="creatTable()"><br> <br> 要删除的行:<input type="text" id="deleteRows"><input type="button" value="删除行" οnclick="deleteRow()"><br> 要删除的列:<input type="text" id="deleteCows"><input type="button" value="删除列" οnclick="deleteCol()"><br> <br> 要交换的行:<input type="text" id="swapRow1">, <input type="text" id="swapRow2"><input type="button" value="交换行" οnclick="swapRow()"><br> 要交换的列:<input type="text" id="swapCol1">, <input type="text" id="swapCol2"><input type="button" value="交换列" οnclick="swapCol()"><br> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-700203.html

专利

最新回复(0)