js操作表格的方法介绍

最新推荐文章于 2022-05-05 23:14:28 发布

tianshijava

最新推荐文章于 2022-05-05 23:14:28 发布

阅读量220

点赞数 1

分类专栏：随手笔记

本文链接：https://blog.csdn.net/tianshijava/article/details/84365383

版权

随手笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在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方法)" οnclick="createRow()"><br>
<input type="button" value="创建一行(insertRow方法)" οnclick="insertRow()"><br>
<input type="text" id="rowindex" value="">
<input type="button" value="指定位置添加" οnclick="insertRowIndex()"><br>
<input type="text" id="deleterowindex" value="">
<input type="button" value="指定位置删除" οnclick="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>

tianshijava

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作表格的方法介绍

在web开发中使用js动态生成表格的情况非常普遍，现对常用的方法做介绍。document.createElement 创建一个元素,如var _row = document.createElement("tr");document.getElementById("").appendChild(); 将一个元素追加到另一个元素上如ocument.getElementById("qiy...
复制链接

扫一扫

专栏目录