<html>
<head>
<title> Test Page </title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<table border="1" width="500">
<tbody id="tb1">
<tr id="tr1">
<td width="50%">1</td>
<td widht="50%"> </td>
</tr>
<tr id="tr2">
<td bgcolor="red">2</td>
<td> </td>
</tr>
<tr id="tr3">
<td>3</td>
<td> </td>
</tr>
<tbody>
</table>
<form name="form1">
<input type="button" value="test" onclick="test()" />
</form>
<script type="text/javascript">
function test(){
var frm = document.form1;
var tb = document.getElementById("tb1"); //获取表格对象
var trs = tb.getElementsByTagName("tr"); //获取所有的<tr>
var del_tr = trs[1]; //设定删除第2行
var tr = tb.removeChild(del_tr); //删除第2行
var new1 = document.createElement("tr"); //新建一行
tb.appendChild(new1);
var new_td1 = document.createElement("td"); //在新建行中添加单元格
new_td1.style.color = "blue"; //新建行的第1个单元格字体设为蓝色
new_td1.setAttribute("align", "center"); //新建行的第1个单元格的对齐方式设为居中
new_td1.innerHTML = "aa"; //新建行第1个单元格内容
new1.appendChild(new_td1);
var new_td2 = document.createElement("td"); //添加第2个单元格
new_td2.innerHTML = " ";
new_td2.style.backgroundColor = "red"; //设定背景色为红色
new1.appendChild(new_td2);
tb.appendChild(new1);
}
</script>
</body>
</html>
分享到：
相关推荐
使用JavaScript和DOM动态创建表格
简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地...
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
javascript 用dom模型删除单元格 很简单的javascript
javascript实现的动态增减表格 dom ie
用DOM控制的奇偶行变色的简单表格实现，通过javascript实现对奇偶行的表格背景颜色的控制
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
NULL 博文链接：https://phf123456-yeah-net.iteye.com/blog/716950
1.3 在Web页面中使用JavaScript 5 1.3.1 HTML的基本结构 5 1.3.2 在HTML中嵌入JavaScript 7 1.3.3 链接JavaScript文件 9 1.4 编写JavaScript的工具 11 1.4.1 使用纯文本编辑器 11 1.4.2 使用专业化脚本编辑工具 13 ...
// 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption....
主要内容包括JavaScript的概念和基本语法、CSS基础、CSS排版、DOM模型框架、网页中的事件、表格表单、JavaScript的调试与优化、Ajax异步技术等。在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术：主要包括...
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
1．3 在web页面中使用JavaScript 1．3．1 HTML的基本结构 1．3．2 在HTML中嵌入JavaScript 1．3．3 链接JavaScript文件 1．4 编写JavaScript的工具 1．4．1 使用纯文本编辑器 1．4．2 使用专业化脚本编辑工具 ...
DOM编程详解(含HTML部分)DOM是Document Object ...简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
在javascript中，用DOM节点去实现表格内容移上 移下的效果 以及对表格进行添加删除等功能的实现。
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
16.4.html 在JavaScript中使用FileSystemObject操作本地文件的方法。 第18章（\c18） 示例描述：学习XMLHttpRequest对象。 18.1.html 使用Ajax获取HTTP头信息。 18.2.html 使用Ajax获取全部响应头信息...
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...