<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动态创建表格
在本主题"js表格操作，DOM实现数据动态增删查改"中，我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**：首先，我们需要在HTML中创建一个基础的表格结构。这通常...
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地...
在这个特定的练习中，我们将探讨如何使用JavaScript动态地生成表格，这对于构建交互式Web应用或者处理动态数据展示是非常有用的。 在描述中提到的博文链接（已省略）可能提供了一个详细的步骤指南或者示例代码，以...
javascript 用dom模型删除单元格 很简单的javascript
在这个例子中，我们将探讨如何利用JavaScript在HTML表格中实现动态添加行，并将数据提交到服务器进行存储。 首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、...
在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具...
1. 基于JavaScript和DOM的动态表单设计：通过对表格树型结构的分析，利用DOM技术实现了一种可动态添加和删除表格的表单。 2. 数据库连接方式：两种有效的数据库连接方式，解决了数据存储和读取的问题。 3. 兼容性：...
javascript实现的动态增减表格 dom ie
第二种方法是通过DOM操作创建`<tbody>`、`<tr>`和`<td>`元素，然后将它们添加到表格中。这种方法比第一种更加灵活，可以方便地控制表格结构，比如将不同的行分组到不同的`<tbody>`中。 ```javascript function ...
在提供的"demo.html"文件中，可能包含了一个实际的例子，演示了如何使用JavaScript控制表格换色。通过查看和学习这个示例代码，你可以更深入地理解上述概念，并将其应用到自己的项目中。 总之，JavaScript为网页中...
以下是一个简单的JavaScript函数，用于在表格中动态添加一行： ```javascript function addTableRow(name, age, city) { // 创建新行 var newRow = document.createElement('tr'); // 创建每个单元格并添加内容...
在网页开发中，JavaScript是一种非常重要的脚本语言，它使得网页具有交互性和动态性。本教程将深入探讨如何使用JavaScript创建动态的表格实例，包括表格的动态增删行功能以及鼠标移动时单元格变色和奇偶行颜色变化的...
9. **表格数据绑定**：当表格数据来源于服务器时，使用Ajax（异步JavaScript和XML）技术可以动态加载和更新表格。`XMLHttpRequest`对象是Ajax的基础，但现代浏览器更推荐使用`fetch` API。 10. **IntelliJ IDEA配置...
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
使用`XMLHttpRequest`对象或现代浏览器的`fetch` API，可以获取服务器上的数据并动态填充到表格中。 4. **CSS样式控制**：JavaScript可以配合CSS来改变表格的外观，如使用`style`属性设置单元格的背景色、字体大小...
实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...
在本书中，作者详细讲解了如何利用JavaScript有效地操作DOM，实现动态网页效果。DOM提供了对网页元素的抽象表示，通过DOM，JavaScript可以添加、删除或修改网页上的任何元素，从而实现诸如响应式设计、动画效果、...