如何使用 .val() 从表中获取最后一行数据并使用 jquery 在警报中显示它？

debugcn 发表于 Dev

达山

这是我的脚本代码。

$(document).ready(function() {
  $(".add-row").click(function() {
    var name = $("#name").val();

    var markup = "<tr><td>" + name + "</td></tr>";
    $("table tbody").append(markup);
  });

  $(".bttn").click(function() {
    var i = $("#tab").find("tr").last().val();
    alert(i);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="name" placeholder="Name">
  <input type="button" class="add-row" value="Add Row">
</form>
<table id="tab">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter Parker</td>
    </tr>
  </tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<button type="button" class="bttn">show Row</button>

我有一个表格，当单击“添加行”按钮时，它会在其中添加行。每次如果我按下“显示行”按钮，最后一行数据应该显示在警报提示中。如何使用 Jquery 做到这一点？

萨帕尔

您需要使用.text()作为TR元素没有value属性。

$("#tab").find("tr").last().text()

$(document).ready(function() {
  $(".add-row").click(function() {
    var name = $("#name").val();

    var markup = "<tr><td>" + name + "</td></tr>";
    $("table tbody").append(markup);
  });

  $(".bttn").click(function() {
    var i = $("#tab").find("tr").last().text().trim();
    alert(i);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="name" placeholder="Name">
  <input type="button" class="add-row" value="Add Row">
</form>
<table id="tab">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter Parker</td>
    </tr>
  </tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<button type="button" class="bttn">show Row</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。