繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 学习笔记（十三）Dom创建表格
- Javascript
- jQuery中isFunction方法的BUG修复
- 将函数的实际参数转换成数组的方法
- javascript 删除数组中重复项（uniq）
- js 巧妙去除数组中的重复项
- javascript下一种表单元素获取方法存在的问题
- javascript 三种数组复制方法的性能对比
- js 多层叠的TAB选项卡
- javascript 自动标记来自搜索结果页的关键字
- 起点页面传值js,有空研究学习下
- javascript 的Document属性和方法集合
- JavaScript 使用简略语法创建对象的代码
- 使用JQuery进行跨域请求
- jquery 经典动画菜单效果代码
- jquery 常用操作方法
- js提示信息jtip封装代码，可以是图片或文章
- javascript面向对象的方式实现的弹出层效果代码
- jquery中的sortable排序之后的保存状态的解决方法
- js或css实现滚动广告的几种方案
- 使用JavaScript库还是自己写代码？
- js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
Javascript 中的 JavaScript 学习笔记（十三）Dom创建表格
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 46 ::
收藏到网摘: n/a
下面弄个实例，运用Dom的知识，实例操作。 Dom基础—创建表格
利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。
1、insertRow(index)：index从0开始
这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：
objTable.insertRow (objTable.rows.length)就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index)：index从0开始
删除指定位置的行，要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有这个属性
objTable.deleteRow(index);
在使用过程中，删除表格的行的时候，如果删除了某一行，那么表格行数是马上就变化的，rows.length总是在变小，所以如果你要删除表格的所有行：
复制代码 代码如下:
function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
}
}
3、setAttribute()方法,动态设置单元格与行的属性
格式如下：setAttribute(属性，属性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //为表格设置边框为1
在使用的时候遇到一个设置样式的问题，不能用
setAttribute("class","inputbox1");而应该使用
setAttribute("className","inputbox1")，
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步：你需要有一个你去动态变化的表格，这里讲的是已经存在页面的表格,我们设置一个id：myTable
var objMyTable = document.getElementById("myTable");
第二步：创建行与列的对象
复制代码 代码如下:
var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最后的行
//var nextRow = objMyTable.insertRow(0); //在最前的行
下面是示例代码
复制代码 代码如下:
<script type="text/javascript">
var Count = false; //控制交替换行
var NO = 1; //行号
function addRow() {
Count = !Count;
//添加一行
var newTr = table.insertRow(table.rows.length); //在最后新增一行
//var newTr = table.insertRow(0); //在最前面新增一行
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if (Count) {
newTr.style.background = "#FFE1FF";
}
else {
newTr.style.background = "#FFEFD5";
}
NO++;
newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />';
newTd1.innerText = "第" + NO + "行";
newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />';
}
</script>
<body>
<form id="form1" runat="server">
<input type="button" value="插入行" onclick="addRow()" />
<table width="399" border="0" cellspacing="1" id="table" style="font-size: 14px;">
<tr bgcolor="#FFEFD5">
<td width="6%">
<input type="checkbox" id="box1" />
</td>
<td>
第1行
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
</table>
</form>
</body>
评论 (0) All
