Question

如何让按钮发出警报，使其仅显示按钮同一行中的人员的名字和姓氏？

我从下面的jsfiddle中粘贴了当前代码，但是按钮返回了一个空字符串。

我误解了javascript吗？

获取与按钮最接近的表行，因此与按钮位于相同的表行，并将其保存在row变量中。
在该按钮的同一表行中搜索每个表数据容器。
创建一个变量“人”
在当前行中，在标签和FirstName / LastName类中找到html。
显示一条消息，其中包含现在填充的“ person”变量的字符串转换。

HTML

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label").find(".FirstName").html();
    person.LastName = row.find(".label").find(".LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Answer 1

.find()用于查找其他元素中包含的元素，但.FirstName中不包含.label，它们是同一元素。要选择具有两个类的元素，请将它们放在同一个选择器中，并且它们之间没有空格（空格也意味着找到后代元素）。

    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Answer 2

当.find()在后代row.find(".label").find(".FirstName")中寻找匹配项时，将在.FirstName元素内寻找具有类.label的元素。要匹配标签本身，可以使用.find(".label.FirstName")

由于find方法已经为您选择了匹配的单元格，因此也无需使用.each()遍历行中的每个单元格。

$("button").on("click", function() {
  var row = $(this).closest("tr");
  var person = {
    FirstName: row.find(".label.FirstName").html(),
    LastName: row.find(".label.LastName").html()
  };
  console.log(person);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

如何使用jquery从html中的表格单元中检索值？

2 个答案: