zyz
- 浏览: 25063 次
- 性别:
- 来自: 上海
-
最新评论
在web开发中使用js动态生成表格的情况非常普遍，现对常用的方法做介绍。
document.createElement 创建一个元素,
如var _row = document.createElement("tr");
document.getElementById("").appendChild(); 将一个元素追加到另一个元素上
如ocument.getElementById("qiyexinxitable").appendChild(_row);/*将一行追加到表格上*/
var _row= document.getElementById("_table").insertRow();/*在表格中创建一行*/
_cell = _row.insertCell(0);/*在创建好的tr中创建td*/
_cell.id=""/*设置 _cell的id属性*/
_cell.innerText=""/*在指定的元素中添加文本*/
createTextNode("创建一个文本节点");/*创建一个文本节点,并在节点中写入指定的文字*/
deleteRow(row Index)/*删除一行*/
/*通过表格id获取其指定行与指定列对象*/
document.getElementById("mytable").rows[1].cells[2];
小例子
<html>
<body>
<input type="button" value="创建一行(appendChild方法)" onclick="createRow()"><br>
<input type="button" value="创建一行(insertRow方法)" onclick="insertRow()"><br>
<input type="text" id="rowindex" value="">
<input type="button" value="指定位置添加" onclick="insertRowIndex()"><br>
<input type="text" id="deleterowindex" value="">
<input type="button" value="指定位置删除" onclick="deleteRowIndex()"><br>
<table width="100%" border="5px">
<tbody id="_table">
</tbody>
</table>
<body>
<SCRIPT>
/*初始化一个10行10列的表格*/
function initTable()
{
alert("创建一个10行10列的表格");
for(var i=1;i<=10;i++)
{
var row=document.createElement ("tr");
row.id=i;
for(var j=1;j<=10;j++)
{
var cell=document.createElement ("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode(cell.id));
row.appendChild (cell);
}
document.getElementById("_table").appendChild (row);
}
}
/*创建新的一行，采用appendChild方法*/
function createRow()
{
var row=document.createElement ("tr");
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
for(var i=1;i<=cellCount;i++)
{
var cell=document.createElement ("td");
cell.innerText="新添加"+currentNum+"/"+i;
row.appendChild(cell);
}
document.getElementById("_table").appendChild (row);
}
/*创建新的一行，采用insertRow方法*/
function insertRow()
{
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
var row= document.getElementById("_table").insertRow();/*插入一行*/
for(var i=1;i<=cellCount;i++)
{
var cell=row.insertCell();
cell.innerText="新添加"+currentNum+"/"+i;
}
}
/*在指定位置插入行*/
function insertRowIndex()
{
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
var rowindex = document.getElementById("rowindex").value;
var row= document.getElementById("_table").insertRow(rowindex);/*在指定位置的后面插入一行*/
for(var i=1;i<=cellCount;i++)
{
var cell=row.insertCell();
cell.innerText="指定位置添加";
}
}
/*删除指定行*/
function deleteRowIndex()
{
var rowindex = document.getElementById("deleterowindex").value;
rowindex = parseInt(rowindex)-1;
document.getElementById("_table").deleteRow(rowindex);/*删除指定行,如果不写默认删除第一行,行数从0开始*/
}
initTable();
</SCRIPT>
</html>
document.createElement 创建一个元素,
如var _row = document.createElement("tr");
document.getElementById("").appendChild(); 将一个元素追加到另一个元素上
如ocument.getElementById("qiyexinxitable").appendChild(_row);/*将一行追加到表格上*/
var _row= document.getElementById("_table").insertRow();/*在表格中创建一行*/
_cell = _row.insertCell(0);/*在创建好的tr中创建td*/
_cell.id=""/*设置 _cell的id属性*/
_cell.innerText=""/*在指定的元素中添加文本*/
createTextNode("创建一个文本节点");/*创建一个文本节点,并在节点中写入指定的文字*/
deleteRow(row Index)/*删除一行*/
/*通过表格id获取其指定行与指定列对象*/
document.getElementById("mytable").rows[1].cells[2];
小例子
<html>
<body>
<input type="button" value="创建一行(appendChild方法)" onclick="createRow()"><br>
<input type="button" value="创建一行(insertRow方法)" onclick="insertRow()"><br>
<input type="text" id="rowindex" value="">
<input type="button" value="指定位置添加" onclick="insertRowIndex()"><br>
<input type="text" id="deleterowindex" value="">
<input type="button" value="指定位置删除" onclick="deleteRowIndex()"><br>
<table width="100%" border="5px">
<tbody id="_table">
</tbody>
</table>
<body>
<SCRIPT>
/*初始化一个10行10列的表格*/
function initTable()
{
alert("创建一个10行10列的表格");
for(var i=1;i<=10;i++)
{
var row=document.createElement ("tr");
row.id=i;
for(var j=1;j<=10;j++)
{
var cell=document.createElement ("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode(cell.id));
row.appendChild (cell);
}
document.getElementById("_table").appendChild (row);
}
}
/*创建新的一行，采用appendChild方法*/
function createRow()
{
var row=document.createElement ("tr");
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
for(var i=1;i<=cellCount;i++)
{
var cell=document.createElement ("td");
cell.innerText="新添加"+currentNum+"/"+i;
row.appendChild(cell);
}
document.getElementById("_table").appendChild (row);
}
/*创建新的一行，采用insertRow方法*/
function insertRow()
{
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
var row= document.getElementById("_table").insertRow();/*插入一行*/
for(var i=1;i<=cellCount;i++)
{
var cell=row.insertCell();
cell.innerText="新添加"+currentNum+"/"+i;
}
}
/*在指定位置插入行*/
function insertRowIndex()
{
var rowCount =document.getElementById("_table").rows.length;/*获得全部行数*/
var cellCount=document.getElementById("_table").rows.item(0).cells.length; /*获得每一行的列数*/
var currentNum = parseInt(rowCount)+1;
var rowindex = document.getElementById("rowindex").value;
var row= document.getElementById("_table").insertRow(rowindex);/*在指定位置的后面插入一行*/
for(var i=1;i<=cellCount;i++)
{
var cell=row.insertCell();
cell.innerText="指定位置添加";
}
}
/*删除指定行*/
function deleteRowIndex()
{
var rowindex = document.getElementById("deleterowindex").value;
rowindex = parseInt(rowindex)-1;
document.getElementById("_table").deleteRow(rowindex);/*删除指定行,如果不写默认删除第一行,行数从0开始*/
}
initTable();
</SCRIPT>
</html>
- test.zip (1019 Bytes)
- 下载次数: 0
分享到：
发表评论
-
monit
2015-07-19 15:51 0http://blog.csdn.net/coolboylai ... -
monit linux监控
2015-07-19 14:03 338English | VPS常用软件下载 ... -
JAVA 持久层三种查询方式
2015-01-04 09:56 422Java JPA有三种查询方式： 1）JPQL 2）Crite ... -
apache2.2设置最大连接数
2014-09-09 10:39 815Apache的最大连接数，默认为256个。 修改ap ... -
linux启动oracle
2014-06-18 12:59 389http://www.360doc.com/content/1 ... -
linux下升级openssh
2013-10-22 19:27 1517查询是否安装telnet # rpm -qa | grep ... -
javascript:history.go()和History.back()的区别
2013-10-09 16:13 693javascript:history.go()和History ... -
struts2中各个jar包的作用
2013-09-13 09:19 650struts2 jar包说明 commons-logging- ... -
js操作SELECT对象
2013-09-02 16:38 657<html> <head> <t ... -
js实现javaMap对象
2013-08-22 08:38 545<script> /*js实现map功能*/ f ... -
input中的事件及方法
2013-07-18 16:50 0input text 的事件及方法 ... -
js循环删除表格
2013-06-07 10:37 717由于表格的总条数会随着表格的删除动态改变，因此不能使用传统的f ... -
web.xm文件的作用
2013-03-18 12:11 828web工程中的web.xml文件有 ... -
myeclipse修改cvs链接地址
2013-02-18 10:23 2259由于服务器IP的地址的变更，在eclipse中要进行更改仓库的 ... -
模态窗口使用介绍
2013-01-06 15:46 597打开模态窗口 window.showModalDialog(u ... -
js设置DIV属性
2012-12-05 08:42 693//控制内容 function settex ... -
document.getElementsByTagName()方法摘要
2012-09-07 18:01 657document.getElementsByTagName() ... -
设计select语句时影响效率查询的15个情况
2012-08-27 16:20 844没有创建索引，或者没有正确使用索引； 存在死锁的情况，从而导 ... -
web.xml配置文件详解
2011-12-26 11:15 6041 定义头和根元素 ... -
struts2文件上传最大值配置
2011-12-02 16:58 654使用Struts2的文件上传控 ...
相关推荐
js操作表格 实例 js操作表格 实例 js操作表格 实例
在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...
### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中，我们首先看到了一个简单的示例，展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤： 1. **获取容器元素**：通过`...
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
在JavaScript编程中，操作表格是一项常见的任务，尤其是在网页交互和数据展示方面。在这个主题中，我们将深入探讨如何使用JavaScript来创建、初始化、增加和删除表格元素。以下是一份详细的指南，帮助你理解并掌握...
表格操作常用方法! 值得下载看看!资源免费,大家分享!!
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...
"纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据，如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**： js-xlsx是JavaScript的一个开源库，专门用于处理Excel...
9. **数据绑定**：更高级的实现可能涉及到数据绑定，如使用MVVM框架（如Vue.js或React.js），这样可以将数据与视图分离，实现更高效且易于维护的表格操作。 10. **兼容性考虑**：在编写JavaScript代码时，要确保其...
通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
本篇文章通过一个简单的实例，展示了如何使用JavaScript实现表格行上下移动的操作，涉及到了对页面元素节点及属性的操作技巧。 首先，我们来看一个简单的表格示例，它包含了几个表格行（`<tr>`）和单元格（`<td>`）...
总的来说，JS操作表格的核心在于理解DOM API，如`getElementById`，`createElement`，`appendChild`，`textContent`等属性和方法。通过这些工具，我们可以轻松地实现对HTML表格的数据操作。这个例子中的代码提供了...
为了更好地理解和掌握JavaScript操作表格的方法，建议读者进行以下实践： - 使用上述方法创建一个简单的表格，尝试获取其中的数据并显示出来。 - 探索更多有关`table`元素的属性和方法，以便更灵活地处理表格数据。 ...
在提供的压缩包文件“JS操作表格大全”中，可能包含了各种JavaScript操作表格的实例代码，包括但不限于以上所述的添加和删除操作，还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例，将有助于提升你对...
"js实现对表格的增删查改"这个主题，就是关于如何利用JavaScript来管理HTML表格中的数据，提供用户友好的数据操作功能。 首先，我们来理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始，`<tr>`标签定义每...