javascript - 使用 jquery 从 HTML 表中提取数据

Question

我正在尝试使用 jquery 获取生成的表并从中创建一个对象。我看过up examples但当我尝试实现时，我遇到了一些奇怪的行为。鉴于我的表的简化版本(通过 Spring MVC 生成):

<table id="notices"> 
  <thead>
    <tr>
      <td class="columnheader">Order</td>
      <td class="columnheader" style="display: none;">ID</td>
      <td class="columnheader">Title</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="formlabel"><input class="fields" size="2" type="text" value="3"></td>
      <td class="formlabel" style="display: none;">JP-L2913666442781178567X</td>
      <td class="formlabel"><a href="javascript:void(0);" class="editNoticeOpen">*Notice1</a></td>
    </tr>

    <tr>
      <td class="formlabel"><input class="fields" size="2" type="text" value="2"></td>
      <td class="formlabel" style="display: none;">JP-L2913666442760937100X</td>
      <td class="formlabel"><a href="javascript:void(0);" class="editNoticeOpen">Quiz Notice - Formative</a></td>
    </tr>
  </tbody>
</table>

我当前脚本的片段:

var noticeMap = $('#notices tbody tr').map(function() {
    var $row = $(this);
    return {
      sequence: $row.find(':nth-child(1)').text(),
      noticeUID: $row.find(':nth-child(2)').text()
    };
});

当我de[fire]bug时，noticeMap看起来像这样:

Object { sequence="*Notice1", noticeUID="JP-L2913666442781178567X"}, 
Object { sequence="Quiz Notice - Formative", noticeUID="JP-L2913666442760937100X"}

不知何故:nth-child(1)正在检索标题，第三个td。我相信这与检索输入的值有关，但我不确定从这里去哪里。也许因为输入字段位于我指定的 td 子项内，所以它不被视为直接后代，因此未检索到正确的文本？我觉得奇怪的是它会跳到第三个 td。唉，我还在学习jquery，虚心请求任何想法和指导。

谢谢!

Answer 1

您对 input 问题的看法是正确的，您必须获取 td 内 input 的值，即未定义为文本节点，而是定义为其自己的元素，因此您必须在 jQuery 选择器中指定子元素。另外 .text() 不适用于输入元素，您可以使用 .val() 读取其值。

这将有助于您为对象获取正确的值:

$row.find(':nth-child(1) input').val();

或者使用.eq()

var noticeMap = $('#notices tbody tr').map(function() {
    var $cells = $(this).children();
    return {
      sequence: $cells.eq(0).children('input').val(),
      noticeUID: $cells.eq(1).text()
    };
});

或者进入具有键/值对的单个对象:

var noticeMap = {};

$('#notices tbody tr').each(function() {
  var $cells = $(this).children();
  noticeMap[$cells.eq(0).children('input').val()] = $cells.eq(1).text();      
});

我不太确定为什么您最初的尝试返回第三个 td 内的文本。这真的很奇怪。我会修补它。

编辑

在我看来.find()在某种程度上它对返回的内容很聪明，它似乎意识到调用 .text() 不会在它找到的第一个匹配项(第一个 td)上返回任何内容，它因此，沿着 DOM 向下查找下一个具有 :first-child 的元素，该元素与第三个 td 内的 a 标签匹配，然后它返回该 a 标记的文本。当我删除标题周围的 a 时，.find() 开始再次返回 ""，我认为这是因为它找不到第一场比赛之后的另一场比赛没有返回任何有用的内容。

使用.children()在这种情况下会更安全，因为它只查找直接后代并且不会沿着 DOM 向下移动。