JavaScript编写一个函数，向表单添加另外 2 个从属单选按钮（偶数/奇数）。通过单击按钮，您需要删除偶数行或奇数行，具体取决于用户的选择。应用于html

### 回答1：代码如下： ```html <!DOCTYPE html> <html> <head> <title>Add radio buttons to form</title> <script> function addRadioButtons() { // Get the form element var form = document.getElementById("myForm"); // Create the radio buttons and labels var evenRadioButton = document.createElement("input"); evenRadioButton.type = "radio"; evenRadioButton.name = "rowType"; evenRadioButton.value = "even"; var evenLabel = document.createElement("label"); evenLabel.innerHTML = "Even rows"; var oddRadioButton = document.createElement("input"); oddRadioButton.type = "radio"; oddRadioButton.name = "rowType"; oddRadioButton.value = "odd"; var oddLabel = document.createElement("label"); oddLabel.innerHTML = "Odd rows"; // Add the radio buttons and labels to the form form.appendChild(evenRadioButton); form.appendChild(evenLabel); form.appendChild(document.createElement("br")); form.appendChild(oddRadioButton); form.appendChild(oddLabel); } function deleteRows() { // Get the table element var table = document.getElementById("myTable"); // Get the selected radio button value var rowType = document.querySelector('input[name="rowType"]:checked').value; // Loop through the rows and delete the desired ones for (var i = table.rows.length - 1; i >= 0; i--) { if ((rowType === "even" && i % 2 === 1) || (rowType === "odd" && i % 2 === 0)) { table.deleteRow(i); } } } </script> </head> <body> <form id="myForm"> <p>Select which rows to delete:</p> <button type="button" onclick="deleteRows()">Delete rows</button> </form> <table id="myTable"> <tr><td>Row 1, column 1</td><td>Row 1, column 2</td></tr> <tr><td>Row 2, column 1</td><td>Row 2, column 2</td></tr> <tr><td>Row 3, column 1</td><td>Row 3, column 2</td></tr> <tr><td>Row 4, column 1</td><td>Row 4, column 2</td></tr> <tr><td>Row 5, column 1</td><td>Row 5, column 2</td></tr> </table> <script> addRadioButtons(); </script> </body> </html> ``` 在这个例子中，我们首先定义了一个名为 `addRadioButtons` 的函数，该函数创建并添加两个单选按钮和标签到表单中。然后我们定义了一个名为 `deleteRows` 的函数，该函数在单击删除按钮时运行。该函数首先获取表格元素，并通过查询所选单选按钮的值来确定要删除的行。最后，它遍历表格中的所有行，根据所选单选按钮的值决定是否删除该行。 Hope this helps! ### 回答2：以下是用 JavaScript 编写的一个函数，可以向表单添加另外 2 个从属单选按钮（偶数/奇数），并根据用户的选择删除相应的行。首先，在 HTML 中添加一个表单和一个 id 为 "table" 的表格： ```html <form id="form"> <label><input type="radio" name="rowType" value="even" checked>偶数行</label> <label><input type="radio" name="rowType" value="odd">奇数行</label> </form> <table id="table"> <tr><td>行 1</td></tr> <tr><td>行 2</td></tr> <tr><td>行 3</td></tr> <tr><td>行 4</td></tr> <tr><td>行 5</td></tr> </table> ``` 然后，在 JavaScript 中编写一个函数，通过单击按钮来删除偶数行或奇数行： ```javascript function deleteRows() { var table = document.getElementById("table"); var rows = table.getElementsByTagName("tr"); var rowType = document.querySelector('input[name="rowType"]:checked').value; for (var i = rows.length - 1; i >= 0; i--) { if ((i % 2 === 0 && rowType === "even") || (i % 2 !== 0 && rowType === "odd")) { table.deleteRow(i); } } } ``` 最后，将函数绑定到按钮的点击事件上： ```javascript document.querySelector('input[name="rowType"]').addEventListener("click", deleteRows); ``` 这样，当用户点击 "偶数行" 按钮时，将删除奇数行；当用户点击 "奇数行" 按钮时，将删除偶数行。可以根据需要修改表格的内容和样式。 ### 回答3：你可以使用JavaScript编写一个函数，实现向表单添加两个从属单选按钮（偶数/奇数），并根据用户的选择删除对应的行。首先，在HTML文件的合适位置，添加一个用于显示表单的容器，例如一个div标签，并给它一个唯一的id，方便后续操作。例如： ```html <div id="formContainer">  </div> ``` 接下来，在JavaScript文件中，定义一个函数，用于向表单添加从属单选按钮，并处理按钮的点击事件，根据用户的选择删除偶数行或奇数行。例如： ```javascript function addRadioButtons() { // 创建两个从属单选按钮 var evenRadio = document.createElement("input"); evenRadio.type = "radio"; evenRadio.name = "numberType"; evenRadio.value = "even"; // 表示删除偶数行 evenRadio.textContent = "偶数"; var oddRadio = document.createElement("input"); oddRadio.type = "radio"; oddRadio.name = "numberType"; oddRadio.value = "odd"; // 表示删除奇数行 oddRadio.textContent = "奇数"; // 将单选按钮添加到表单容器中 var formContainer = document.getElementById("formContainer"); formContainer.appendChild(evenRadio); formContainer.appendChild(oddRadio); // 监听按钮的点击事件 evenRadio.addEventListener("click", function() { deleteRows("even"); }); oddRadio.addEventListener("click", function() { deleteRows("odd"); }); } function deleteRows(type) { // 获取表单中的行 var rows = document.getElementsByTagName("tr"); // 遍历行，并根据用户选择删除偶数行或奇数行 for (var i = rows.length - 1; i >= 1; i--) { if ((i % 2 === 0 && type === "even") || (i % 2 !== 0 && type === "odd")) { rows[i].remove(); } } } // 在适当的时机调用addRadioButtons函数，例如页面加载完成后 window.addEventListener("load", function() { addRadioButtons(); }); ``` 这段代码会创建两个单选按钮（偶数/奇数），并将它们添加到表单容器中。通过监听按钮的点击事件，根据用户的选择调用`deleteRows`函数删除相应的行。在`deleteRows`函数中，首先获取到所有的行，然后根据用户选择的类型删除对应的行。请将上述代码复制到您的HTML文件中，并根据实际需要修改表单的HTML代码和相关的选择器，使其能够适应您的具体场景。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

JavaScript编写一个函数，向表单添加另外 2 个从属单选按钮（偶数/奇数）。 通过单击按钮，您需要删除偶数行或奇数行，具体取决于用户的选择。应用于html

最新推荐

layui实现点击按钮给table添加一行

vue 表单之通过v-model绑定单选按钮radio

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

layer提示框添加多个按钮选择的实例

JavaScript实现点击按钮字体放大、缩小

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

JavaScript编写一个函数，向表单添加另外 2 个从属单选按钮（偶数/奇数）。通过单击按钮，您需要删除偶数行或奇数行，具体取决于用户的选择。应用于html