jQuery从邻居TD获取输入名称数组键值

时间:2014-10-10 12:36:32

标签: php jquery html

很难在标题中解释,但是一些代码说明了一切:

<tr class="">
  <td>
    <input value="9" name="set[122][order]"></input>
    <input class="set-id" type="hidden" value="1" name="set[122][ex_id]"></input>
  </td>
  <td>
    <input value="0.00" name="set[122][weight]"></input>
  </td>
  <td> … </td>
  <td>
    <img class="deleteRowButton" border="0" title="Toggle Delete Set" alt="Delete Set" src="mysite/images/icons/png/delete-3x.png"></img>
  </td>
</tr>

我点击了img(deleteRowButton)时激活了一些jQuery代码:

$('.deleteRowButton').click (function() {

  $(this).parents("tr").toggleClass( "deleteSet" );
  var id = $('.set-id', $(this).closest('td')).val(); // this bit not working

  $('.editWoForm').append('<input type="hidden" name="deleteSet[]" value="' + id + '" />');
});

deleteRowButton代码基本上只是在我的表单底部插入一个隐藏的输入标记,所以我有能力处理这些以从db中删除条目。

但是,我需要做的是从set[]获取值,因此在此示例122中。它可以来自任何输入,因为整个tr与一个条目相关。 122是数据库ID,因此我需要抓取它。

理想情况下,当用户点击deleteRowButton时,它会生成并插入:

<input type="hidden" name="deleteSet[]" value="122" />

提前致谢!


解决方案

感谢@ArunPJohny的帮助。

$('.deleteRowButton').click (function() {
  var $tr = $(this).parents("tr").toggleClass( "deleteSet" );
  var id = $tr.find('.set-id').attr('name').match(/\d+/)[0];

  if($tr.hasClass( "deleteSet" )){
    $('.editWoForm').append('<input type="hidden" name="deleteSet[]" value="' + id + '" />');
  }
  else{
    $('input[name="deleteSet[]"][value="' + id + '"]').remove();
  }
});

这将获取id,附加一个带有所述id作为值的隐藏输入字段,然后如果再次按下该按钮(切换删除状态),则删除隐藏的输入字段。

1 个答案:

答案 0 :(得分:2)

此处的一种方法是对当前set-id元素内的tr元素进行细化。您要做的是找到set-id,该td位于deleteRowButton内,其中包含点击的$('.deleteRowButton').click(function() { //use closest instead of parents var $tr = $(this).closest("tr").toggleClass("deleteSet"); //find the set-id within the current tr var id = $tr.find('.set-id').attr('name').match(/\d+/)[0]; //$('.editWoForm').append('<input type="hidden" name="deleteSet[]" value="' + id + '" />'); $('#log').text(id) });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="">
    <td>
      <input value="9" name="set[122][order]"/>
      <input class="set-id" type="hidden" value="1" name="set[122][ex_id]"/>
    </td>
    <td>
      <input value="0.00" name="set[122][weight]"/>
    </td>
    <td> … </td>
    <td>
      <img class="deleteRowButton" border="0" title="Toggle Delete Set" alt="Delete Set" src="mysite/images/icons/png/delete-3x.png"/>
    </td>
  </tr>
  <tr class="">
    <td>
      <input value="9" name="set[123][order]"/>
      <input class="set-id" type="hidden" value="2" name="set[123][ex_id]"/>
    </td>
    <td>
      <input value="0.00" name="set[123][weight]"/>
    </td>
    <td> … </td>
    <td>
      <img class="deleteRowButton" border="0" title="Toggle Delete Set" alt="Delete Set" src="mysite/images/icons/png/delete-3x.png"/>
    </td>
  </tr>
</table>
<div id="log"></div>
{{1}}