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


Posted in Javascript onDecember 10, 2013

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>
<body> 
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" > 
<tr bgcolor="#FFEFD5"> 
<td width=6%><input type=checkbox id="box1"></td> 
<td >第1行</td> 
<td > </td> 
</tr> 
</table> 
<label> 
<input type="button" value="插入行" onclick="addRow()" /> 
</label> 
</body> 
</html>

5、appendChild()方法

<html> 
<head> 
<title>My Test Page</title> 
<script type="text/javascript"> 
<!-- 
var textNumber = 1; 
function addTextBox(form, afterElement) { 
// Increment the textbox number 
textNumber++; 
// Create the label 
var label = document.createElement("label"); 
// Create the textbox 
var textField = document.createElement("input"); 
textField.setAttribute("type","text"); 
textField.setAttribute("name","txt"+textNumber); 
textField.setAttribute("id","txt"+textNumber); 
// Add the label's text 
label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); 
// Put the textbox inside 
label.appendChild(textField); 
// Add it all to the form 
form.insertBefore(label,afterElement); 
return false; 
} 
function removeTextBox(form) { 
if (textNumber > 1) { // If there's more than one text box 
    // Remove the last one added 
    form.removeChild(document.getElementById("txt"+textNumber).parentNode); 
    textNumber--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
label { 
display:block; 
margin:.25em 0em; 
} 
--> 
</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>
<html> 
<head> 
<title>My Test Page</title> 
<script type="text/javascript"> 
<!-- 
var textNumber = 1; 
function addTextBox(form, afterElement) { 
// Increment the textbox number 
textNumber++; 
// Create the label 
var label = document.createElement("label"); 
// Create the textbox 
var textField = document.createElement("input"); 
textField.setAttribute("type","text"); 
textField.setAttribute("name","txt"+textNumber); 
textField.setAttribute("id","txt"+textNumber); 
// Add the label's text 
label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); 
// Put the textbox inside 
label.appendChild(textField); 
// Add it all to the form 
form.insertBefore(label,afterElement); 
return false; 
} 
function removeTextBox(form) { 
if (textNumber > 1) { // If there's more than one text box 
    // Remove the last one added 
    form.removeChild(document.getElementById("txt"+textNumber).parentNode); 
    textNumber--; 
} 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
label { 
display:block; 
margin:.25em 0em; 
} 
--> 
</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 相关文章推荐
javascript 节点遍历函数
Mar 28 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
vue-loader教程介绍
Jun 14 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
javascript修改表格背景色实例代码分享
Dec 10 #Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 #Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
javascript 数字格式化输出的实现代码
Dec 10 #Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 #Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 #Javascript
浅析jQuery1.8的几个小变化
Dec 10 #Javascript
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
JS和函数式语言的三特性
2014/03/05 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python实现k-means算法
2018/02/23 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
flask框架中的cookie和session使用
2021/01/31 Python
原材料检验岗位职责
2014/03/15 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
艺术节开幕词
2015/01/28 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
运动会主持人开幕词
2016/03/04 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android