JavaScript编写一个函数,向表单添加另外 2 个从属单选按钮(偶数/奇数)。 通过单击按钮,您需要删除偶数行或奇数行,具体取决于用户的选择。应用于html
时间: 2023-06-08 14:08:34 浏览: 91
使用JavaScript在单选按钮上显示/隐藏控件单击
页面中的表格。
好的,让我来回答你的问题。以下是JavaScript代码示例,可以向HTML表单添加两个从属单选按钮,并根据用户的选择删除表格中的偶数或奇数行:
```javascript
function addRowSelector() {
// 获取表格
var table = document.getElementById("myTable");
// 创建包含单选按钮和标签的新单元格
var cell = document.createElement("td");
cell.innerHTML = '<label><input type="radio" name="rowSelector" value="even"> 偶数行</label><br><label><input type="radio" name="rowSelector" value="odd"> 奇数行</label>';
// 将新单元格添加到表格的每一行
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
row.insertBefore(cell.cloneNode(true), row.cells[0]);
}
}
function deleteSelectedRows() {
// 获取表格
var table = document.getElementById("myTable");
// 获取用户选中的单选按钮值
var selectedValue = '';
var rowSelector = document.getElementsByName("rowSelector");
for (var i = 0; i < rowSelector.length; i++) {
if (rowSelector[i].checked) {
selectedValue = rowSelector[i].value;
}
}
// 根据用户的选择删除偶数或奇数行
for (var i = table.rows.length - 1; i >= 0; i--) {
// 判断是否为偶数行
if (i % 2 == 0 && selectedValue == "even") {
table.deleteRow(i);
}
// 判断是否为奇数行
if (i % 2 != 0 && selectedValue == "odd") {
table.deleteRow(i);
}
}
}
// 在窗口加载时调用添加单选按钮的函数
window.onload = function() {
addRowSelector();
};
```
在以上的JavaScript代码中,我们定义了两个函数,分别是 addRowSelector() 和 deleteSelectedRows()。addRowSelector() 函数用来向表格中的每一行添加两个从属单选按钮,用户可以通过单选按钮选择删除偶数行或奇数行。deleteSelectedRows() 函数根据用户的选择,删除表格中的偶数行或奇数行。
在把以上 JavaScript 代码加到 HTML 中后,我们还需要在 HTML 中添加一个表格示例,以便 JavaScript 能够操作它。以下是一个简单的表格示例:
```html
<table id="myTable">
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td>3</td>
<td>Bob</td>
<td>Smith</td>
</tr>
<tr>
<td>4</td>
<td>Alice</td>
<td>Johnson</td>
</tr>
</table>
<button onclick="deleteSelectedRows()">删除选定行</button>
```
在这个示例中,我们定义了一个 id 为 "myTable" 的表格,并在表格下方添加了一个按钮,当用户单击该按钮时,JavaScript 会调用 deleteSelectedRows() 函数来删除用户选择的偶数行或奇数行。
阅读全文