search

Home >Web Front-end >JS Tutorial >Javascript method to dynamically create tables and delete rows and columns_javascript skills

Javascript method to dynamically create tables and delete rows and columns_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:58:541200browse

The example in this article describes the method of dynamically creating tables and deleting rows and columns using Javascript. Share it with everyone for your reference. The specific implementation method is as follows: 

<!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>动态创建表格(还能删除行列)</title>
<style type="text/css">
body,div
{
 margin:0;
 padding:0;
 font-size:14px;
}
table
{
 margin:0 auto;
}
td
{
 border:1px solid green;
 text-align:center;
}
</style>
<script type="text/javascript">
//动态创建表格
function createTable() {
  var divMain = document.getElementById("divMain");
  removeAllChild(divMain); //删除上次添加的表格
  var myTable = document.createElement("table");
  myTable.id = "DynamicTable";
  var myRow = document.getElementById("myRow").value;
  var myCol = document.getElementById("myCol").value;
  var trNode;
  var tdNode;
  var strTmp;
  for (var i = 1; i <= myRow; i++) {
    trNode = myTable.insertRow(-1);
    for (var j = 1; j <= myCol; j++) {
      strTmp ="第"+ i + "行,第"+ j + "列";
      tdNode = trNode.insertCell(-1);
      tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
    }
  }
  divMain.appendChild(myTable); //把表格添加到div中
  //event.srcElement.disabled = "true"; //添加按钮禁用
}
//删除指定节点下的所有子节点
function removeAllChild(nodeObj) {
  while (nodeObj.hasChildNodes()) {
    nodeObj.removeChild(nodeObj.firstChild);
  }
}
//删除行
function DeleteRow() {
  var rowNum = document.getElementById("delRow").value;
  var tbl = document.getElementById("DynamicTable");

  if (tbl == null) {
    alert('请先创建表格');
    return;
  }
  if ((rowNum <= tbl.rows.length) && (rowNum > 0)) {
    tbl.deleteRow(rowNum-1);
  }
  else {
    alert('请输入一个有效的行!');
  }
}
//删除列
function DeleteCol() {
  var colNum = document.getElementById("delCol").value;
  var tbl = document.getElementById("DynamicTable");
  if (tbl == null) {
    alert('请先创建表格');
    return;
  }
  if(tbl.rows.length<=0) {
    alert('表格不存在行');
    return;
  }
  if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
    for (var i = 0; i < tbl.rows.length; i++) {
      tbl.rows[i].deleteCell(colNum - 1);
    }
  }
  else {
    alert('指定列不存在');
  }
}
</script>
</head>
<body>
请输入行数<input type="text" id="myRow" />,请输入列数
<input type="text" id="myCol" /><br />
<input type="button" value="创建表格" onclick="createTable()" /><br />
<input type="text" id="delRow" /><input type="button" value="删除行" 
onclick="DeleteRow()" /><br />
<input type="text" id="delCol" /><input type="button" value="删除列" 
onclick="DeleteCol()" /><br />
<div id="divMain">
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Javascript implements draggable color change and closing layer window instance_javascript skillsNext article：Javascript implements draggable color change and closing layer window instance_javascript skills

Related articles

See more