首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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绘制表格的二种方法)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
Nov 09 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
JavaScript随机数的组合问题案例分析
May 16 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
VOLVO(1) E1-XM(1) ETON(1) 军机(1) 66-XI(1) MOTOROLA(1) 77A(2) S900(1) 摩托罗拉(1) 沃尔沃(1)
You might like
PHP 图像尺寸调整代码
2010/05/26 PHP
Laravel给生产环境添加监听事件（SQL日志监听）
2017/06/19 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
input按钮的事件处理大全
2010/12/10 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python多线程编程（七）：使用Condition实现复杂同步
2015/04/05 Python
OpenCV实现人脸识别
2017/04/07 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
基于Python解密仿射密码
2019/10/21 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
加拿大最大的钻石商店：Peoples Jewellers
2018/01/01 全球购物
英国手工制作的现代与经典的沙发和床：Love Your Home
2020/09/26 全球购物
澳大利亚著名的纺织品品牌：Canningvale
2020/05/05 全球购物
个人现实表现材料
2014/02/04 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
详解flex:1什么意思
2022/07/23 HTML / CSS