JavaScript编写一个函数,向表单添加另外 2 个从属单选按钮(偶数/奇数)。 通过单击按钮,您需要删除偶数行或奇数行,具体取决于用户的选择。应用于html
时间: 2023-06-08 08:08:44 浏览: 45
好的,这是一个JavaScript函数可以添加两个从属单选按钮并根据用户的选择删除偶数或奇数行的表单:
```html
<!DOCTYPE html>
<html>
<head>
<title>Delete Even/Odd Rows</title>
<script>
function addRadioButtons() {
var form = document.getElementsByTagName('form')[0];
var evenRadio = document.createElement('input');
var oddRadio = document.createElement('input');
evenRadio.type = 'radio';
oddRadio.type = 'radio';
evenRadio.name = 'row';
oddRadio.name = 'row';
evenRadio.value = 'even';
oddRadio.value = 'odd';
evenRadio.id = 'even';
oddRadio.id = 'odd';
form.insertBefore(evenRadio, form.firstChild);
form.insertBefore(document.createTextNode('Even Rows'), form.firstChild);
form.insertBefore(oddRadio, form.firstChild);
form.insertBefore(document.createTextNode('Odd Rows'), form.firstChild);
}
function deleteRows() {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tr');
var selected = document.querySelector('input[name=row]:checked').value;
for (var i = 0; i < rows.length; i++) {
if ((i % 2 === 0 && selected === 'even') || (i % 2 === 1 && selected === 'odd')) {
table.deleteRow(i);
i--;
}
}
}
</script>
</head>
<body onload="addRadioButtons()">
<form>
<table id="myTable">
<tr><td>row 1, col 1</td><td>row 1, col 2</td></tr>
<tr><td>row 2, col 1</td><td>row 2, col 2</td></tr>
<tr><td>row 3, col 1</td><td>row 3, col 2</td></tr>
<tr><td>row 4, col 1</td><td>row 4, col 2</td></tr>
<tr><td>row 5, col 1</td><td>row 5, col 2</td></tr>
</table>
<br>
<input type="button" value="Delete" onclick="deleteRows()">
</form>
</body>
</html>
```
这段代码会在表单中添加两个从属单选按钮,分别代表删除偶数和奇数行。当用户选择其中一个选项并点击“删除”按钮时,函数将会根据用户的选择删除偶数或奇数行。具体过程是:首先获得表格,并获取其中所有的行。然后,通过 `querySelector` 方法获取用户选择的单选按钮的值。最后,循环遍历表格中的每一行,如果该行是用户选择的要删除的行,则从表格中删除该行。