将 HTML 表格行转换为不带 HTML 标记的对象

Question

我有一个通过 Webapi 调用填充的表。我允许一个人通过选择器对该部分进行更改。我需要做的是获取部分的名称，每行的“添加级别”、“编辑级别”、“删除级别”和“读取级别”。 我计划做的是 SerializeArray() 来获取确实有效的值对（名称/值），除了我必须为名称添加差异（添加、查询、编辑等）以确定哪个去哪里 我目前拥有的

HTML：

<form id="InventoryFrm" >
  <table id="InventoryTable">
    <thead>
      <tr id="Columns"> 
        <th> <i class="fa fa-chevron-down"></i> Inventory</th>
        <th>Add Level</th>
        <th>Edit Level</th>
        <th>Delete Level</th>
        <th>Inquire Level</th>
        <th>Last Updated</th>
        <th>Updated By</th>
      </tr>
    </thead>
    <tbody class="InventoryTableBody" >

    </tbody>
  </table>
</form>

JavaScript：

var InventoryBody = $('.InventoryTableBody');
 $.each(res.Inventory, function(index,value){
 $.each(value, function(id, val){ 
InventoryBody.append(` <tr><td>${value[id].EntityName}</td>
<td><select id="${value[id].EntityName}add"> <option>${value[id].AddLevel[0]}</option><option>${value[id].AddLevel[1]}</option><option>${value[id].AddLevel[2]}</option></select></td>  
 <td> <select id="${value[id].EntityName}edit"> <option>${value[id].EditLevel[0]}</option><option>${value[id].EditLevel[1]}</option><option>${value[id].EditLevel[2]}</option></select></td>  
 <td> <select id="${value[id].EntityName}delete"> <option>${value[id].DeleteLevel[0]}</option><option>${value[id].DeleteLevel[1]}</option><option>${value[id].DeleteLevel[2]}</option></select></td>
<td> <select id="${value[id].EntityName}inquire"> <option>${value[id].InquireLevel[0]}</option><option>${value[id].InquireLevel[1]}</option><option>${value[id].InquireLevel[2]}</option></select></td>
                    <td></td><td></td> </tr>`);
                  })
                })


var InvFm=$("#InventoryFrm").serializeArray();

这给了我一个像这样的对象

{name: "Items add", value: "All"}
{name: "Items edit", value: "All"}
{name: "Items delete", value: "All"}
{name: "Items inquire", value: "All"}

从技术上讲，这是“项目”的全部一行，应该类似于

Name: "Items" Add: "All" Edit: "All" Delete: "All" Inquire: "All"

这个想法是它是动态的，因此有人可以根据需要更改它，因此 Items 也不是“硬编码”的。 如果我得到 TR，我必须处理 HTML，这意味着需要清除更多不必要的数据。 有没有更好的方法让我错过/过度思考从行中获取相关数据，或者我被困在转换中

Answer 1

如果格式始终为：{name: "OBJECT ACTION", value: "VALUE"}，那么您的过程非常简单。

• 获取第一行。
• 按空格分解名称。这给了你“对象”。
• 对每一行进行迭代。
• 按空格分解名称。这会给你“行动”。
• 获取价值。这会给你“价值”。

此时，您只需根据需要重新格式化数据。

---

根据评论更新

如果您的某些对象中有空格，则可能不会丢失所有对象。如果您的操作没有有空格，您可以使用正则表达式查询除操作之外的所有操作。