1

我有以下表格数据要在我的 HTML 中遍历：

<table id="publicationTable" cellpadding="2" cellspacing="0">
<tr>
<td vAlign="top"><IMG SRC="/images/icons/general/spacer.gif" width="20" height="1"></td>
<td class="SmallColHeading">Published     </td>
<td class="ColRow">Publisher, place and date of publication</td>
</tr>
<tr>
<td vAlign="top"><IMG SRC="/images/icons/general/spacer.gif" width="20" height="1"></td>
<td class="SmallColHeading">
Format     </td>
<td class="ColRow">
vii, 201 pages ; 23 cm.     </td>
</tr>

我想输出文本“vii, 201 pages ; 23. cm”。与 document.evaluate 但我遗漏了一些东西。问题是选择器应该是具有类属性值“SmallColHeading”的 td 并且具有（包含）格式的文本节点/值。

var Pagination = document.evaluate("//td[contains(., 'Format')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
var Pagination2 = Pagination.nextSibling.innerHTML;
if (Pagination.singleNodeValue) {
                var Pages = Pagination.singleNodeValue.textContent;
            }
alert(Pagination2);
alert(Pages);

我在 nextSibling 之后特别尝试了各种组合，例如删除 innerHTML（我得到未定义）或用 textContent 替换它（我得到无法读取属性'textContent'）。我正在努力在这个 HTML 上通过 javascript 遍历 nextSibling，因为 tr 甚至没有 id 值，而这就是我们在系统中拥有的所有东西。提前致谢！

4

2 回答 2

1

我能够通过以下代码实现结果：

 var Pages = document.evaluate("//td[contains(., 'Format')]/following-sibling::td", 
 document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
 if (Pages.singleNodeValue) {
                var pages = Pages.singleNodeValue.textContent;
            }

我应该在此之后遍历：“//td[contains(., 'Format')]/”，添加“following-sibling::td”而不是添加这样的变量：“var Pagination2 = Pagination.nextSibling。内部HTML；" 这篇文章如何使用 xpath 选择以下兄弟/xml 标记给了我提示以及我查看的初始链接：Javascript .querySelector find <div> by innerTEXT和这个：https ://developer.mozilla.org/en-US /docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript

于 2019-04-30T10:17:36.547 回答
0

不需要 XPath；这可以很简单地用.getElementsByClassName()and来实现.nextElementSibling：

var pagination = document.getElementsByClassName('SmallColHeading')[0];
var pagination2 = pagination.nextElementSibling;
console.log(pagination2.innerHTML.trim());
<table>
<tr>
  <td vAlign="top">
    <IMG SRC="/images/icons/general/spacer.gif" width="20" height="1" />
  </td>
  <td class="SmallColHeading">
    Format
  </td>
  <td class="ColRow">
    vii, 201 pages ; 23 cm.
  </td>
</tr>
</table>

.trim()可用于消除任何额外的空白。

请注意，这<IMG>将需要一个自闭合标签，并且您需要一个外部<table>元素。没有 contains <table>，表格内容将直接添加到<body>，并且此选择器将无效。

于 2019-04-30T04:56:49.130 回答