web的html以表格形式展示内容，且表格数据可以实现前端Dom的增加、删除、修改、全选功能的代码

以下是一个简单的示例代码，实现了表格数据的增加、删除、修改和全选功能：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="checkAll"></th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkItem"></td>
      <td>张三</td>
      <td>20</td>
      <td><a href="#" class="edit">编辑</a> | <a href="#" class="delete">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkItem"></td>
      <td>李四</td>
      <td>25</td>
      <td><a href="#" class="edit">编辑</a> | <a href="#" class="delete">删除</a></td>
    </tr>
  </tbody>
</table>

<button id="addRow">添加行</button>

JavaScript代码：

// 获取元素
const table = document.getElementById('myTable');
const checkAll = document.getElementById('checkAll');
const checkItems = document.querySelectorAll('.checkItem');
const addRowBtn = document.getElementById('addRow');

// 全选功能
checkAll.addEventListener('change', function() {
  checkItems.forEach(item => {
    item.checked = this.checked;
  });
});

// 删除功能
table.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete')) {
    const tr = event.target.closest('tr');
    tr.parentNode.removeChild(tr);
  }
});

// 添加行功能
addRowBtn.addEventListener('click', function() {
  const tbody = table.querySelector('tbody');
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td><input type="checkbox" class="checkItem"></td>
    <td contenteditable="true">新建姓名</td>
    <td contenteditable="true">新建年龄</td>
    <td><a href="#" class="edit">编辑</a> | <a href="#" class="delete">删除</a></td>
  `;
  tbody.appendChild(tr);
});

// 编辑功能
table.addEventListener('click', function(event) {
  if (event.target.classList.contains('edit')) {
    const td = event.target.closest('td');
    const isEditing = td.classList.contains('editing');
    if (isEditing) {
      // 保存修改
      td.classList.remove('editing');
      event.target.textContent = '编辑';
    } else {
      // 开始编辑
      td.classList.add('editing');
      event.target.textContent = '保存';
    }
  }
});

这段代码实现了一个带有增加、删除、修改和全选功能的表格，你可以根据需要进行修改和扩展。