JQuery在表中获取父输入

Question

我有一个表在循环中创建了tbody（因此，我不能拥有id，因为它将具有相同的id）。最后一个是输入类型按钮。如何获得先前输入的值？

<table class="table-b tablesaw tablesaw-stack" data-tablesaw-mode="stack">
   <thead>
        <!--- <th> here --->
   </thead>
   <tbody>
     <!--- LOOP Start --->
     <tr>
       <TD align=center><Input Type=Text Name=Amount Value="10"></TD>
        <TD align=center><Input Type=Text Name=Name Value="Name Test"></TD>
       <TD align=center><INPUT TYPE="button" onclick="test()" VALUE="Update"></TD>
     </tr>
     <!--- LOOP End --->
 </table>

 <script>
    function test(){
        // Using JQuery, how can I get the Amount and Name values?
    }
 </script>

由于

Answer 1

这样，您就可以访问点击内容附近的input和name。它的工作原理是在所有按钮上分配一个事件监听器，这样当它被点击时，它将遍历DOM树以获得适当的值。

$('.table-b input[type="button"]').click(function() {
  var tr = $(this).closest('tr');
  var amount = tr.find('input[name="Amount"]').val();
  var name = tr.find('input[name="Name"]').val();
});

Answer 2

您的方法存在一些问题

你元素的一些标签，属性都有大写字母。

<TD align=center><Input Type=Text Name=Amount Value="10"></TD>
 ^                ^     ^    ^    ^           ^

缺少</tbody>。

     </tr>
     <- Here is missing </tbody>
 </table>

将事件委派用于buttons，如下所示

$(document).on('click', '.table-b tbody tr td [type="button"]', function() {...}

建议的方法

var $tr = $(this).closest('tr');
var obj = {
  "amount": $tr.find('[name="Amount"]').val(),
  "name": $tr.find('[name="Name"]').val()
}

console.log(obj); 

<强>段

$(document).on('click', '.table-b tbody tr td [type="button"]', function() {
  var $tr = $(this).closest('tr');
  var obj = {
    "amount": $tr.find('[name="Amount"]').val(),
    "name": $tr.find('[name="Name"]').val()
  }
  
  console.log(obj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-b tablesaw tablesaw-stack" data-tablesaw-mode="stack">
  <thead>
    <!--- <th> here --->
  </thead>
  <tbody>
    <!--- LOOP Start --->
    <tr>
      <td align=center>
        <input type=text name="Amount" value="10">
      </td>
      <td align=center>
        <input type=text name=Name value="Name Test1">
      </td>
      <td align=center>
        <input type="button" value="Update">
      </td>
    </tr>
    <tr>
      <td align=center>
        <input type=text name="Amount" value="11">
      </td>
      <td align=center>
        <input type=text name=Name value="Name Test2">
      </td>
      <td align=center>
        <input type="button" value="Update">
      </td>
    </tr>
  </tbody>
  <!--- LOOP End --->
</table>

Answer 3

<table class="table-b tablesaw tablesaw-stack" data-tablesaw-mode="stack">
 <thead>
    <!--- <th> here --->
</thead>
<tbody>
 <!--- LOOP Start --->
 <tr>
   <TD align=center><Input Type=Text Name=Amount Value="10"></TD>
    <TD align=center><Input Type=Text Name=Name Value="Name Test"></TD>
   <TD align=center><INPUT TYPE="button" onclick="test(this)" VALUE="Update"></TD>
 </tr>
 <!--- LOOP End --->
</table>

<script>
function test(obj){
  amount = $(obj).prev().prev().val();
  name = $(obj).prev().val;
}