如何在单击按钮时获取 table 的 td 中的输入值

Question

我有一个动态 table，每行都有一个输入字段，每行都有一个相应的按钮。当我点击相应的按钮时，我想获得输入字段的相应值。要复制该场景，您可以参考以下两行静态代码。有人可以帮忙吗？

$(".returnItem").click(function(){
    var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
    var row = $(".newQty").val(); //This is not working also
    alert(row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control newQty" type="number" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control newQty" type="number" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Answer 1

在您的示例中，您使用的是 jQuery 1.2.3，它不包含 closest 函数（自 1.3 起添加）。虽然，您不是在寻找函数 closest，而是 parents。通过这个函数，你会找到父<tr>，然后通过find你会找到输入并通过val获得他的值。

另外，由于你的按钮在表单里面，按下按钮后，表单会被提交，所以你需要添加e.preventDefault()阻止表单发送。

$(".returnItem").click(function(e){
  e.preventDefault();
  row = $(this).parents("tr").find("input[name='newQty']").val();
  alert(row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
          <div class="container text-center">
            <td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Answer 2

您在导致刷新的按钮中使用了 type="submit" jquery 获取数据有很多选项，下面给出的是其中之一他们。
使用最新版本的 jquery cdn 以使用基于 closest 和 find 的功能。 https://cdnjs.com/libraries/jquery

$(".returnItem").click(function(){
    var row = $(this).parent().prev().prev().children().val(); 
    alert(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
  <div class="container-fluid">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Part Number</th>
          <th scope="col">Name of Item</th>
          <th scope="col">Description</th>
          <th scope="col">Quantity</th>
          <th scope="col">New Quantity</th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>xxxxxxxxxxx</td>
          <td>name1</td>
          <td>description1</td>
          <td>10</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
            <td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>yyyyyyyyyy</td>
          <td>name2</td>
          <td>description2</td>
          <td>20</td>
          <input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
          <td><input class="form-control" type="number" class="newQty" name="newQty"></td>
            <td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
            <td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

如何在单击按钮时获取 table 的 td 中的输入值

How to get input value in a table's td on button click

html

javascript

jquery

html-table