运用html创建一个表格每行最后一个单元格有删除按钮，运用js-dom来实现删除

好的，关于您的问题，我可以为您提供以下代码来实现：

HTML代码：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>女</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
</table>

JS代码：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

这段代码会为表格的每一行的最后一个单元格添加一个“删除”按钮，单击按钮之后会删除该行数据。

相关问题

HTML表格中，下拉菜单单元格选择后，点击一个按钮锁定该下拉菜单

你可以使用JavaScript来实现这个功能。具体步骤如下：

1. 给下拉菜单单元格添加一个id属性，方便后面的操作。例如：`<td id="dropdownCell">`。

2. 在JavaScript代码中，首先获取到该单元格的DOM元素。可以使用`document.getElementById()`方法来获取。例如：`const dropdownCell = document.getElementById("dropdownCell");`。

3. 给按钮添加一个点击事件的监听器。例如：`button.addEventListener("click", lockDropdown);`。

4. 在`lockDropdown()`函数中，首先禁止下拉菜单的默认行为。例如：`event.preventDefault();`。

5. 然后给下拉菜单单元格添加一个`disabled`属性，禁用该单元格。例如：`dropdownCell.disabled = true;`。

完整的代码示例如下：

<table>
  <tr>
    <td id="dropdownCell">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </td>
    <td>
      <button id="lockButton">Lock Dropdown</button>
    </td>
  </tr>
</table>

<script>
  const dropdownCell = document.getElementById("dropdownCell");
  const lockButton = document.getElementById("lockButton");

  function lockDropdown(event) {
    event.preventDefault();
    dropdownCell.disabled = true;
  }

  lockButton.addEventListener("click", lockDropdown);
</script>

写一个使用var 定义一个名为data数组，在data数组里面创建假数据，通过layui表格里面clos形式把数据渲染到表格中，同时有一个新增按钮通过dom。append方法渲染到表格最后一行，第二个格子内

我明白了，您想让我给您提供一个使用var定义一个名为data数组的代码片段，在data数组里生成假数据，并使用layui中的表格组件将数据渲染到表格中，然后在表格的最后一行添加一个新增按钮，并且在第二个单元格中显示一些内容。

以下是代码实现：

// 定义一个名为data的数组
var data = [];

// 循环生成10条假数据
for (var i = 1; i <= 10; i++) {
  var item = {
    id: i,  // ID
    name: '数据' + i,  // 名称
    price: Math.floor(Math.random() * 100),  // 价格
    remark: '备注信息'  // 备注
  }
  data.push(item);
}

// 使用layui表格组件将数据渲染到表格中
layui.use(['table'], function () {
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#demo',  // 表格的容器
    data: data,  // 数据源
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '名称', width: 150},
      {field: 'price', title: '价格', width: 100},
      {field: 'remark', title: '备注信息'}
    ]]
  });

  // 在表格最后一行添加一个新增按钮
  $('#demo').append('<tr><td></td><td><button id="addBtn">新增</button></td><td></td><td></td></tr>');

  // 在第二个单元格中显示一些内容
  $('#demo tr:last').prev().find('td:eq(1)').text('这是要显示的内容');
});

以上代码中，我们首先使用var定义了一个名为data的数组，并循环生成了10条假数据。然后，我们通过layui表格组件将数据渲染到表格中，在表格的最后一行添加了一个新增按钮，并在第二个单元格中显示了一些内容。