javascript如何创建表格(javascript绘制表格的二种方法)

2024-10-07 18:48:38

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始

和上面两个方法差不多的意思，就是删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

代码如下:

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性，嘿嘿
objTable.deleteRow(index);

在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

代码如下:

function clearRow(){
objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )
   {
   tblObj.deleteRow(i);
      }
}

这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：

代码如下:

function clearRow(){
   objTable= document.getElementById("myTable");
   var length= objTable.rows.length ;
   for( var i=1; i<length; i++ )
   {
       objTable.deleteRow(i);
      }
}

3、动态设置单元格与行的属性

A、采用setAttribute()方法，格式如下：setAttribute(属性，属性值)

说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：1

代码如下:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//为表格设置边框为1

其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

代码如下:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//为单元格设置高度为24

在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

B、直接赋值

代码如下:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//为表格设置边框为1

这个方法也全部适用，呵呵。

4、创建表格

了解了行<tr>与单元格<td>的增删那就可以创建表格了。

第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

代码如下:

var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

代码如下:

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的

//单元格箱号
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");

这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧~

代码如下:

<!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=gb2312" />
<title>蓝光-BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//添加一行
var newTr = testTbl.insertRow(testTbl.rows.length);
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>

5、appendChild()方法

代码如下:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

JavaScript与DOM组合动态创建表格实例

这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列
JS创建自定义表格具体实现

JS部分: 复制代码代码如下: function next() { //得到table对象 var oTable = document.getElementById("table1"); //插入tr var oTr = oTable.insertRow(); //一行tr插入3个td var oTd1 = oTr.insertCell(); var oTd2 = oTr.insertCell(); var oTd3 = oTr.insertCell(); //指定td内容 oTd1
JavaScript如何动态创建table表格

两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开
javascript 动态创建表格

复制代码代码如下: <html> <head> <script> function createTable(rows,lines){ this.rows=rows; this.lines=lines; var Body=document.getElementById('body'
JS封装的自动创建表格的实现代码

为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈.. 关键代码如下: <script type="text/javascript"> var currentActiveRow; //选中的颜色 var customTable = function() { }; customTable.prototype = { init: { ajaxUrl: "", tId: "tbody
javascript 动态创建表格的2种方法总结

第一种方法: 复制代码代码如下: <html> <head> <script> function createTable(rows,lines){ this.rows=rows; this.lines=lines; var Body=document.getElementById
基于JavaScript实现动态创建表格和增加表格行数

在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>
Javascript动态创建表格及删除行列的方法

本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!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"
javascript动态创建表格及添加数据实例详解

本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态
一组JS创建和操作表格的函数集合

stone.js //**************************************神吹表格操作函数******************************************************* //隐藏列 function setHiddenRow(tb,iCol){ for (i=0;i<oTable.rows.length;i++){ tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCo

javascript如何创建表格(javascript绘制表格的二种方法)

相关推荐

随机推荐