Jquery 将输入值保存在子行-数据表中

我有数据表的形式。数据表在小型设备上生成。在这几行中，我有一些输入控件。这导致了两个问题

第一个问题：*隐藏子行中的值未进入表单数据**

第二个问题：*编辑此输入并隐藏行后，值消失**

有人能帮我吗

谢谢

更新

DataTable（）之前的简化tbody

系统架构师
爱丁堡
61

在.DataTable（）之后

系统架构师
爱丁堡
61

扩大

<tbody>  
  <tr role="row" class="odd parent">
    <td class="sorting_1">System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>              
  </tr>
  <tr class="child">
    <td class="child" colspan="3">
      <ul data-dtr-index="0">
        <li data-dtr-index="3">
          <span class="dtr-title">Age:</span>
          <span class="dtr-data">
            <input name="1" type="text" style="background-image: ; background-       attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </span>
         </li>
         <li data-dtr-index="4">
           <span class="dtr-title">Start date:</span>
           <span class="dtr-data">
             <input name="2" type="text"></span>
         </li>
         <li data-dtr-index="5">
           <span class="dtr-title">Salary:</span>
           <span class="dtr-data">
             <input name="3" type="text" value="example">
           </span>
         </li>
       </ul>
     </td>
  </tr>
</tbody>

系统架构师
爱丁堡
61


年龄：


开始日期：


薪金：

所有简化代码看起来都像

注释

对于我们的一些内部问题，我不能使用DataTables Ajax方法- 这将非常缓慢，并且违反应用程序逻辑。这就是我的原因 正在尝试按经典形式从DataTable传递数据

解决方案

下面不是一个理想的解决方案，但至少它是有效的。我还没有测试过隐藏的表单元素，而且这个解决方案不能在同一个单元格中使用多个表单元素

您需要使用以包含表单元素的所有列为目标，并使用option定义一个函数，该函数将返回包含当前表单字段值的HTML。这对于在子行中呈现正确的表单字段是必需的

此外，当用户更改子行中表单字段的值时，需要更新父表单字段

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
“columnDefs”：[
{
"目标":[1,2,3,4,5],，
“呈现”：函数（数据、类型、行、元）{
如果（类型==‘显示’）{
var api=new$.fn.dataTable.api（meta.settings）；
var$el=$（'input，select，textarea'，api.cell（{row:meta.row，column:meta.col}）.node（））；
var$html=$（数据）.wrap（“”）.parent（）；
如果（$el.prop（'tagName'）='INPUT'）{
$（'input'，$html.attr（'value'，$el.val（））；
如果（$el.prop（'checked'））{
$（'input'，$html）.attr（'checked'，'checked'）；
}
}else if（$el.prop（'tagName'）='TEXTAREA'）{
$（'textarea'，$html）.html（$el.val（））；
}else if（$el.prop（'tagName'）='SELECT'）{
$（'option:selected'，$html）.removeAttr（'selected'）；
$（'option'，$html）.filter（函数（）{
返回（$（this.attr（'value'）==$el.val（））；
}).attr（'selected'，'selected'）；
}
data=$html.html（）；
}
返回数据；
}
}
],
“响应”：正确
});
//更新原始输入/选择子行中的更改
$（'#示例tbody'）。在（'keyup change'，'上。子输入、.child选择、.child文本区域'，函数（e）{
var$el=$（本）；
var rowIdx=$el.closest（'ul'）。数据（'dtr-index'）；
var colIdx=$el.closest（'li'）。数据（'dtr-index'）；
var cell=table.cell（{row:rowIdx，column:colIdx}）.node（）；
$（'input，select，textarea'，cell）.val（$el.val（））；
if（$el.is（':checked'））{$（'input'，cell.prop（'checked'，true）；}
});
});

演示

有关代码和演示，请参阅

链接

---

如果看不到创建子行的代码，就无法创建该行。我刚刚更新了我的问题。我建议查看fiddle上的代码，并尝试将其未扩展/扩展提交。这是一个非常好的问题，我想我可能有答案。如果您不介意等一两天，我会在这里发布一个解决方案。非常感谢您，我很乐意提供任何线索。所以现在，我只想通过以下步骤解决第二个问题：获取输入值（在focusout上）->通过DT.data（）从表中获取数据->更改此数据中的特定输入值->DT.clear（）->DT.rows.add（编辑的数据）->DT.draw（）。。。但是这个解决方案在每个editIt上折叠表行，有可能被形式化并转化为插件。不是因为它是死硬的编程，而是因为很多很多人都需要这个功能——我想。@davidkonrad，我正在考虑它，但我想在我想出一个插件之前给出一个答案。@Gyrocode.com，谢谢你的解决方案，它对于第二个问题非常有效。我把我的问题分成两个独立的问题，这样我就可以把这个标记为答案。我只有一个建议，如果你要把它变成插件。如果您还可以在单元格中包含对多个input/select/textarea的支持，那就太好了。@DanielTreml，我没有测试过隐藏的表单元素，而且这对单元格中的多个表单元素也不起作用。“我将改进这个解决方案以支持它。”DanielTreml，没问题。你能解释一下隐藏元素的问题吗。是否动态修改该值？你能分享一个例子吗，因为你发布的问题没有隐藏的元素？

<tbody>    
    <tr role="row" class="odd">
        <td class="sorting_1">System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
    </tr>
</tbody>

<tbody>  
  <tr role="row" class="odd parent">
    <td class="sorting_1">System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>              
  </tr>
  <tr class="child">
    <td class="child" colspan="3">
      <ul data-dtr-index="0">
        <li data-dtr-index="3">
          <span class="dtr-title">Age:</span>
          <span class="dtr-data">
            <input name="1" type="text" style="background-image: ; background-       attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </span>
         </li>
         <li data-dtr-index="4">
           <span class="dtr-title">Start date:</span>
           <span class="dtr-data">
             <input name="2" type="text"></span>
         </li>
         <li data-dtr-index="5">
           <span class="dtr-title">Salary:</span>
           <span class="dtr-data">
             <input name="3" type="text" value="example">
           </span>
         </li>
       </ul>
     </td>
  </tr>
</tbody>