目标:尝试通过提供表索引,列标题和行号从第n个表中选择单元格。我在Firefox中使用的xpath,但不适用于Chrome。
同样的xpath在Firefox中有效,但无法在Chrome中进行评估。
xpath正在尝试使用列标题选择表中的单元格。
在Firefox中工作,但不在Chrome中工作
(//table)[count((//table)[5]/descendant::th)]
Firefox,根据表5中的列数返回表格,但Chrome不返回任何内容。
((//table)[2]/tbody/tr[1]/td)[count((//table)[2]/descendant::th[.='TextField']/preceding-sibling::th)+1]
Firefox返回“TextField”列第一行中的单元格,Chrome不返回任何内容。
我正在使用的html是一个div汤,如下所示。尝试在Chrome与Firefox中运行代码段,结果会有所不同(如果您运行代码段并完全向下滚动,则可以找到它们。)
// Print title
document.body.insertAdjacentHTML('beforeEnd', '<h2>Table Query Results<\/h2>');
// Evaluate the xpath
var resultTable = document.evaluate("(//table)[count((//table)[2]/descendant::th)-3]", document, null, XPathResult.ANY_TYPE, null);
var resultTableVal = null;
// If the xpath returned a result, grab the first result
if (resultTable != null) resultTableVal = resultTable.iterateNext();
// If both the xpath result and first result have values
if (resultTable != null && resultTableVal != null) {
// Create a pre tag
var preTable = document.createElement('pre');
// While there are results
while (resultTableVal) {
// Add them to pre
preTable.textContent += 'Found ' + resultTableVal.outerHTML + '\n';
resultTableVal = resultTable.iterateNext();
}
document.body.appendChild(preTable);
}
else {
document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}
document.body.insertAdjacentHTML('beforeEnd', '<h2>Cell Query Results<\/h2>');
var resultCell = document.evaluate("((//table)[2]/tbody/tr[1]/td)[count((//table)[2]/descendant::th[.='TextField']/preceding-sibling::th)+1]", document, null, XPathResult.ANY_TYPE, null);
var resultCellVal = null;
if (resultCell != null) resultCellVal = resultCell.iterateNext();
if (resultCell != null && resultCellVal != null) {
var preCell = document.createElement('pre');
while (resultCellVal) {
preCell.textContent += 'Found ' + resultCellVal.outerHTML + '\n';
resultCellVal = resultCell.iterateNext();
}
document.body.appendChild(preCell);
}
else {
document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}
table { border: 1px solid black; }
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div>
<h3>Grids</h3>
<div></div>
<div></div>
</div>
<div></div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<span>EditableGrid</span><em>*</em>
</div>
<div>
<p></p>
</div>
<div>
<div>
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>
<div>
<h2>TextField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>ParagraphField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>EncryptedTextField</h2><a><i></i</a>
</div>
</th>
<th>
<div>
<h2>IntegerField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>DecimalField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>DateField</h2><a><i></i></a>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
Text Input
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
Paragraph input
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
Encrypted Text input
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
Integer Input
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
Decimal input
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
<td>
<div>
<div>
<div>
<span><em>*</em>
<label>Label</label></span>
<div>
<div>
<div>
Date input
</div>
</div>
</div>
<div>
<p></p>
</div>
<div></div>
<div></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<span>ReadOnlyGrid</span><em>*</em>
</div>
<div>
<p></p>
</div>
<div>
<div>
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>
<div>
<h2>TextField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>ParagraphField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>EncryptedTextField</h2><a><i></i>/a>
</div>
</th>
<th>
<div>
<h2>IntegerField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>DecimalField</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>DateField</h2><a><i></i></a>
</div>
</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</div>
</div>
<div>
<div>
<div>
<span>EditableGrid</span><em>*</em>
</div>
<div>
<p></p>
</div>
<div>
<div>
<table>
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>
<div>
<h2>PickerField1</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>PickerField2</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>PickerField3</h2><a><i></i></a>
</div>
</th>
<th>
<div>
<h2>PickerField4</h2><a><i></i></a>
</div>
</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Userpick data</td>
<td>Grouppicker data</td>
<td>User group picker data</td>
<td>Document picker</td>
</tr>
<tr>
<td>Folder Picker</td>
<td>Document folder picker</td>
<td>Custom picker</td>
<td><span>*</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
尝试使用(//table)[count((//table)[5]/descendant::th)]
重现问题:
var result = document.evaluate('(//table)[count((//table)[5]/descendant::th)]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (result != null) {
var pre = document.createElement('pre');
pre.textContent = 'Found ' + result.outerHTML;
document.body.appendChild(pre);
}
else {
document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}
table { border: 1px solid black; }
<table id="t1">
<tbody>
<tr>
<td>table 1</td>
</tr>
</tbody>
</table>
<table id="t2">
<tbody>
<tr>
<td>table 2</td>
</tr>
</tbody>
</table>
<table id="t3">
<tbody>
<tr>
<td>table 3</td>
</tr>
</tbody>
</table>
<table id="t4">
<tbody>
<tr>
<td>table 4</td>
</tr>
</tbody>
</table>
<table id="t5">
<thead>
<tr>
<th>table 5 header </th>
</tr>
</thead>
<tbody>
<tr>
<td>table 5</td>
</tr>
</tbody>
</table>
我在Firefox,Edge和Chrome上获得相同的结果,第一个表被选中,第五个表有一个th
元素。考虑编辑您的问题并插入代码片段,以便我们重现问题。