js操作报表的方法介绍-JavaSript-爱易网页

js操作报表的方法介绍

日期：2014-05-16　浏览次数：20343 次

js操作表格的方法介绍
在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)/*删除一行*/

小例子
<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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js操作报表的方法介绍

相关资料更多>

推荐阅读更多>