<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用dom创建表格</title>
<style type="text/css">
table,table td {
border: #239bde thin solid;
width:400px;
border-collapse: collapse;//表格的边框被合并为一个单一的边框
}
table td {
padding: 10px;
}
</style>
<script type="text/javascript">
/*创建表格*/
function crtTable() {
var rownum = parseInt(document.getElementById("rownum").value);
var colnum = parseInt(document.getElementById("colnum").value);
var oTabNode = document.createElement("table");
//oTabNode.id = "newTable";
oTabNode.setAttribute("id","newTable");
for(var i=1;i<=rownum;i++) {
var oTrNode = oTabNode.insertRow();
for(var j=1;j<=colnum;j++) {
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = i+"-"+j;
}
}
document.getElementById("div_tb").appendChild(oTabNode);
//document.getElementById("btn").disabled = true;
}
/*删除行*/
function delRow() {
var tabNode = document.getElementById("newTable");
if(!tabNode) {//tabNode == null;
alert("表格不存在");
return;
}
var rownum = document.getElementById("delrow").value;
var rowsCount = tabNode.rows.length;//获取总行数
if(rownum>=1 && rownum <= rowsCount) {
tabNode.deleteRow(rownum-1);//index 从0开始
} else {
alert("行不存在");
}
}
/*删除列：即删除每一行相同位置的某个单元格*/
function delCol() {
var tabNode = document.getElementById("newTable");
if(!tabNode) {//tabNode == null;
alert("表格不存在");
return;
}
var colnum = document.getElementById("delcol").value;
var colCount = tabNode.rows[0].cells.length;//任意一行的列数
if(colnum>=1 && colnum<=colCount) {
//循环每一行
for(var i=0;i<tabNode.rows.length;i++) {
tabNode.rows[i].deleteCell(colnum-1);//index从0开始，所以减去1
}
} else {
alert("列不存在");
}
}
</script>
</head>
<body>
行:<input type="text" name="rownum" id="rownum" size="2"/>
列:<input type="text" name="colnum" id="colnum" size="2"/>
<input type="button" value="创建表格" id="crt" onclick="crtTable();"/>
<hr/>
行:<input type="text" name="delrow" id="delrow" size="2"/>
<input type="button" value="删除行" onclick="delRow();"/>
列:<input type="text" name="delcol" id="delcol" size="2"/>
<input type="button" value="删除列" onclick="delCol();"/>
<hr/>
<div id="div_tb"></div>
</body>
</html>
分享到：
相关推荐
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...
自已写的一个动态创建表格的qml程序，通过js来控制逻辑，还是很有用
《jQuery动态创建表格生成器代码详解》 在Web开发中，动态生成表格是常见的需求，尤其是在数据展示和交互性较强的应用场景中。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本文...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...
js动态创建表格，利用dom技术动态输入行列来创建表格
JS DOM动态创建表格 行 列
在IT领域，动态创建表格标签是一项常见的编程任务，特别是在网页开发和用户界面设计中。这一技术使得开发者能够根据需要在运行时自动生成表格元素，如`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）以及与...
简单的动态创建表格方法
在这个场景中，我们关注的是如何使用 jQuery 动态创建表格，并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力，或者在数据展示时提供更直观的区分。 首先，我们需要理解 jQuery 如何...
### 使用JSF页面动态创建表格 #### 背景与目的 在开发Web应用程序时，经常需要根据不同的数据集或用户操作动态生成表格。JavaServer Faces（简称JSF）是一种用于构建服务器端Java应用程序的标准技术，它允许开发者...
"源码"标签暗示我们可能可以从这个资源中获取到实际的JavaScript代码片段，这对于实践和理解动态创建表格的过程至关重要。通过阅读和分析源码，我们可以看到如何将数据结构化为表格格式，并在网页上实时显示。 ...
使用JavaScript和DOM动态创建表格
在IT行业中，动态创建表格是一项常见的任务，尤其是在网页开发中，它能提供灵活的数据展示方式。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务，使得动态渲染表格变得更加便捷。...
### JavaScript 动态创建表格详解 在Web开发中，经常需要使用JavaScript来动态地创建或修改HTML表格元素，以响应用户的交互操作或是展示变化的数据。本文将详细介绍如何使用JavaScript中的`appendChild()`, `...
动态创建表格(Html格式),支持横向统计与纵向统计，支持隐藏表头
在JavaScript中动态创建表格是一项常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格，以及如何使用`deleteRow()`和`deleteCell()`...
Javascript动态创建表格 兼容google浏览器、360，ie等浏览器，很实用
13-动态创建表格.html