<html>
<head>
<script type="text/javascript">
function addRow(){
var newTr = document.getElementById("peopleTable").insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
newTd0.width = 50;
newTd0.align = 'right';
newTd0.innerHTML = ' ';
newTd1.width = 200;
newTd1.innerHTML = '<select id="peopletype" name="peopletype">'
+ '<option value="1" selected="selected">主班</option>'
+ '<option value="2">副班</option>'
+ '</select> '
+ '<input type="text" name="people_Cn_" id="people_Cn_" readonly="readonly"/><input type="hidden" name="people" id="people" readonly="readonly"/> '
+ '<img src="btn_channel_bg.gif" border="0" style="margin:0 0 -1px -22px;")> '
+ '<img src="delete.gif" border="0" onclick="deleteRow(this);">';
}
function deleteRow(obj){
var i=obj.parentNode.parentNode.rowIndex
document.getElementById("peopleTable").deleteRow(i);
}
</script>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>选择值班人员</h1>
<p></p>
<br>
<table id="peopleTable" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" align="right">人员： </td>
<td width="200">
<select id="peopletype" name="peopletype">
<option value="1" selected="selected">主班</option>
<option value="2">副班</option>
</select>
<input type="text" name="people_Cn_" id="people_Cn_" readonly="readonly"/><input type="hidden" name="people" id="people" readonly="readonly"/>
<img src="btn_channel_bg.gif" border="0" style="margin:0 0 -1px -22px;">
<img src="add.gif" border="0" onclick="addRow();">
</td>
</tr>
</table>
<div class="spacer"></div>
</form>
</div>
</body>
</html>
预览效果
- 大小: 8.5 KB
分享到：
相关推荐
`insertRow()`、`deleteRow()`、`insertCell()`和`deleteCell()`是四个关键的方法，它们允许开发者直接操纵`<table>`元素的结构。 首先，`insertRow()`方法用于在表格中插入新的行。它的语法是`tableObject....
本文将深入探讨`insertRow()`和`deleteRow()`这两个方法，以及它们在不同浏览器下的兼容性问题，同时也会提及相关的`insertCell()`和`deleteCell()`方法。 `insertRow()`方法用于在表格中插入新的行。在IE浏览器中...
添加行</button> 删除选中行</button> document.getElementById('addBtn').addEventListener('click', function() { addRow('myTable', ['新姓名', '新年龄']); }); document.getElementById('delBtn')....
接着，通过`mytable.insertRow(mytable.rows.length)`在表格的末尾插入一个新行，然后使用`insertCell`方法为新行添加单元格，并将表单中的数据填充到这些单元格中。例如，`newTableRow.insertCell(0).innerText = ...
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
对于“自动添加行”的功能，JavaScript可以通过监听“添加”按钮的点击事件，然后创建新的HTML元素（如表格的行）并将其插入到合适的位置。同时，对于“自动删除行”，JavaScript同样监听“删除”按钮的点击事件，...
在JavaScript编程中，动态添加和删除表格行是常见的需求，特别是在网页交互和数据展示中。本文将详细讲解如何使用纯JavaScript实现这一功能。 首先，我们需要理解HTML中的`<table>`元素，它是创建表格的基本结构。...
()">添加行</button> (cGetRow)">删除选定行</button> ()">显示行号</button> ``` 通过这样的方式，我们可以灵活地对表格进行动态操作，提升用户的交互体验。在实际项目中，还可以结合AJAX进行数据的异步加载和更新...
要动态添加行，可以使用`<table>`元素的`insertRow()`方法。这个方法会在指定的位置插入一行。例如，要在表格的最后添加一行，可以这样写： ```javascript var table = document.getElementById('your_table_id')...
通过以上解析，我们可以看出，该示例代码主要利用了JavaScript的DOM操作能力，结合HTML结构，实现了动态添加、删除以及调整表格行位置的功能。这种技术广泛应用于表单动态构建、数据编辑等场景，极大地提高了Web应用...
JS 动态添加删除 HTML 元素实例 ...* 使用 JavaScript 事件来实现行的删除，并将删除按钮添加到每行中。 本例子展示了如何使用 JavaScript 实现动态添加删除 HTML 元素的技术和方法，并解决了浏览器兼容性问题。
本篇文章将深入探讨如何使用JavaScript自动添加、删除表格，以及实现窗口居中显示的相关技术。 首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`<table>`元素定义，行(`<tr>`)、列(`<td>`或`<th>`...
在JavaScript（JS）中，处理动态表格，特别是添加、复制和删除行的操作是网页交互设计中的常见需求。这种功能在数据展示、用户输入处理或管理类应用中尤为常见。下面我们将详细探讨这些知识点。 首先，让我们理解...
在JavaScript中实现添加删除行的功能是一项常见的任务，尤其在网页表格或者数据管理界面中。这里我们将探讨四种不同的方法来实现这一功能，每种方法都有其适用场景和优缺点。 **方法一：DOM操作** 最基础的方法是...
在上述代码中，`addRow`函数会在表格的末尾添加一行，而`deleteRow`函数则会删除最后一行。这些操作都是基于DOM（Document Object Model）进行的，可以直接改变HTML结构。 当然，为了使表格更具交互性，我们还可以...
为了实现动态添加行的功能，我们需要借助`JavaScript`或者现代前端框架如`jQuery`、`Vue.js`、`React.js`等。这里我们以纯`JavaScript`为例，解释如何实现这个功能： 1. **事件监听**：首先，我们需要在某个元素...
使用 `insertRow` 方法添加行 `insertRow` 是`<table>`或`<tbody>`等元素的一个方法，允许我们在指定的位置插入一个新的行。与`appendChild`不同，`insertRow`不需要我们手动创建`<tr>`元素，而是直接由该方法返回...
添加行</button> ``` 然后，我们可以用JavaScript监听按钮的点击事件，执行添加或删除行的操作： ```javascript document.getElementById('addRow').addEventListener('click', function() { var table = ...
### 动态插入、添加删除表格行的JS代码 在网页开发中，表格是一个非常重要的元素，用于展示数据。为了使网页更具交互性，我们常常需要动态地对表格进行操作，比如插入或删除行等。本文将通过一个具体的示例来讲解...