创建一个web员工信息表格，用dom树编辑其中的信息，设置两个按钮编辑和删除，可以对里面的元素依次进行修改

创建一个Web页面上的员工信息表格，通常会涉及到HTML结构、CSS样式以及JavaScript（尤其是DOM操作）。首先，你需要构建基本的HTML结构，包括一个`<table>`用于显示员工信息，每个`<tr>`代表一条记录，`<td>`则包含姓名、职位等字段。

<table id="employee-table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <!-- 员工数据将动态填充 -->
    </tbody>
</table>

<button onclick="editRow()">编辑</button>
<button onclick="deleteRow()">删除</button>

接下来，你可以使用JavaScript来操作DOM，实现编辑和删除功能：

1. **添加员工数据：**
在`<tbody>`部分通过JavaScript动态生成`<tr>`元素，并插入到合适的位置。

2. **编辑功能 (`editRow()`):**
选中某个行，获取其数据，弹出一个模态框或者一个新的表单让用户输入新的信息，然后更新对应的DOM节点。

   function editRow() {
       var rows = document.getElementById("employee-table").rows;
       var selectedRow = rows[rows.selectedIndex];
       // 获取当前行的数据并展示在新表单中
       var newRowData = getSelectedRowData(selectedRow);
       // 用户修改后，更新DOM
       updateRowData(selectedRow, newRowData);
   }

3. **删除功能 (`deleteRow()`):**
根据用户的选择，从DOM中移除对应行。

   function deleteRow() {
       var rows = document.getElementById("employee-table").rows;
       if (rows.length > 0) {
           var rowToDelete = rows[rows.selectedIndex];
           rowToDelete.remove();
       }
   }
   
   function getSelectedRowData(row) {
       // 从行内元素获取数据
       var data = [];
       var cells = row.cells;
       for (var i = 0; i < cells.length; i++) {
           data.push(cells[i].innerText);
       }
       return data;
   }

   function updateRowData(row, newData) {
       // 更新行内的数据
       for (var i = 0; i < newData.length; i++) {
           row.cells[i].innerText = newData[i];
       }
   }