首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从两个下拉列表中添加一行到表中,并在选择时删除

从两个下拉列表中添加一行到表中,并在选择时删除的实现方法如下:

  1. 首先,需要在HTML中创建一个表格,并在表格中添加两个下拉列表和一个按钮。下拉列表用于选择要添加到表格中的数据,按钮用于触发添加操作。示例代码如下:
代码语言:html
复制
<table id="myTable">
  <thead>
    <tr>
      <th>选项1</th>
      <th>选项2</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

<select id="select1">
  <option value="1">选项1-1</option>
  <option value="2">选项1-2</option>
  <option value="3">选项1-3</option>
</select>

<select id="select2">
  <option value="A">选项2-A</option>
  <option value="B">选项2-B</option>
  <option value="C">选项2-C</option>
</select>

<button onclick="addRow()">添加行</button>
  1. 接下来,需要编写JavaScript代码来实现添加行和删除行的功能。首先,定义一个全局变量rowCount用于记录表格中的行数。然后,编写addRow()函数来添加行。该函数会获取两个下拉列表的选中值,并将其添加到表格的新行中。最后,为新行添加一个删除按钮,并绑定deleteRow()函数来实现删除功能。示例代码如下:
代码语言:javascript
复制
var rowCount = 0;

function addRow() {
  var table = document.getElementById("myTable");
  var select1 = document.getElementById("select1");
  var select2 = document.getElementById("select2");
  
  var newRow = table.insertRow();
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  
  cell1.innerHTML = select1.options[select1.selectedIndex].text;
  cell2.innerHTML = select2.options[select2.selectedIndex].text;
  cell3.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
  
  rowCount++;
}

function deleteRow(button) {
  var table = document.getElementById("myTable");
  var row = button.parentNode.parentNode;
  table.deleteRow(row.rowIndex);
  
  rowCount--;
}
  1. 最后,可以根据需要自定义样式来美化表格和按钮的外观。

以上就是从两个下拉列表中添加一行到表中,并在选择时删除的实现方法。通过这个方法,可以动态地向表格中添加数据,并在选择时进行删除操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从后端到前端之Vue(六)表单组件 HTML5原生的表单和表单元素Vue组件的基础知识表单元素组件辅助工具开源

要想做好表单组件,必须先知道HTML5里面的表单和表单元素都有哪些属性,以及属性的效果和作用,否则的话可能折腾半天才发现,原来HTML5已经自带了这个功能!   比如要实现这样一个功能:文本框只能输入数字,然后要加上两个按钮,按一个数值+1,按另一个数值-1。以前要写js代码实现,现在只需要把type改成number就可以了。而且可以对输入的文字做拦截,非数字根本输入不进去,这样就不用我们自己再去写代码实现了。所以磨刀不误砍柴工,我们先来整理一下,表单和表单属性都有哪些属性。

01
领券