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 String.replace的妙用
Sep 08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
vue实现点击出现操作弹出框的示例
Nov 05 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
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python中字典和集合学习小结
2017/07/07 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python计算二维矩形IOU实例
2020/01/18 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
矫正人员思想汇报
2014/01/08 职场文书
新学期校长寄语
2014/01/18 职场文书
学校七一活动方案
2014/01/19 职场文书
大学毕业自我评价
2014/02/02 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
工程承包协议书
2014/04/22 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis