多层嵌套table 只找出td有文本的xpath值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {}
.main {
width: 550px;
margin: 200px auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="main">
<div>你好呀</div>
<table border="1" width="550">
<tr>
<td>adsda</td>
<td>sad大家啊的进价</td>
</tr>
<tr>
<td>
<table style="width: 490px">
<tbody>
<tr>
<td>
<img >
</td>
<td >
<table >
<tbody>
<tr>
<td>
<table width="100%" style="text-align: center; height: 30px;">
<tbody>
<tr valign="top">
<td >
Modi, Shri Narendra
</td>
</tr>
</tbody>
</table>
<table height="106px">
<tbody>
<tr>
<td >
Constituency :
</td>
<td >
Varanasi (Uttar Pradesh)
</td>
</tr>
<tr>
<td >
Party Name :
</td>
<td >
Bharatiya Janata Party(BJP)
</td>
</tr>
<tr>
<td >
Email Address :
</td>
<td >
www[DOT]pmindia[DOT]gov[DOT]in
</td>
</tr>
<tr>
<td >
</td>
<td >
<a>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>你好大</td>
<td>单独</td>
</tr>
<tr>
<td>
<table class="hhhhh">
<tr>
<td class="gridheader1">
送到哪是的
</td>
<td>
你好吗
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
function readXPath(element) {
if (element.id !== "") { //判断id属性，如果这个元素有id，则显 示//*[@id="xPath"] 形式内容
return '//*[@id=\"' + element.id + '\"]';
}
if (element.getAttribute("class") !== null) { //判断class属性，如果这个元素有class，则显 示//*[@class="xPath"] 形式内容
return '//*[@class=\"' + element.getAttribute("class") + '\"]';
}
//因为Xpath属性不止id和class，所以还可以更具class形式添加属性
//这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）
if (element == document.body) { //递归到body处，结束递归
return '/html/' + element.tagName;
}
var ix = 0, //在nodelist中的位置，且每次点击初始化
siblings = element.parentNode.childNodes; //同级的子元素
for (var i = 0, l = siblings.length; i < l; i++) {
var sibling = siblings[i];
if (sibling == element) { //如果这个元素是siblings数组中的元素，则执行递归操作
return arguments.callee(element.parentNode) + '/' + element.tagName + ((ix + 1) == 1 ? '' : '[' + (ix + 1) + ']'); //ix+1是因为xpath是从1开始计数的，element.tagName+((ix+1)==1?'':'['+(ix+1)+']')三元运算符，如果是第一个则不显示，从2开始显示
} else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) { //如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
ix++;
}
}
};
let arr = []
// parent 循环table
function childNodes(parent, arr) {
let parentNode = parent
let tbodyNode = parentNode.childNodes,
tbody
// 去找tbody元素
for (let i = 0, j = tbodyNode.length; i < j; i++) {
if (tbodyNode[i].nodeType == 1) {
if (tbodyNode[i].nodeName.toLowerCase() === 'tbody') {
tbody = tbodyNode[i]
break;
}
}
}
// 取出它的子集
let trNodes = tbody.childNodes
for (let i = 0, j = trNodes.length; i < j; i++) {
// 判断是tr进行操作
if (trNodes[i].nodeName.toLowerCase() === 'tr') {
let tdNodes = trNodes[i].childNodes
let obj = {
key: '',
value: ''
}
// 找出tr中的td td必须有值 text td里面还有table标签 不进行操作
for (let k = 0, l = tdNodes.length; k < l; k++) {
if (tdNodes[k].nodeName.toLowerCase() === 'td') {
if (tdNodes[k].childNodes.length == 1 && tdNodes[k].childNodes[0].nodeName == '#text') {
if (!obj['key']) {
// obj['key'] = tdNodes[k].childNodes[0].nodeValue
obj['key'] = $shadow.domXpath(tdNodes[k])
} else {
// obj['value'] = tdNodes[k].childNodes[0].nodeValue
obj['value'] = $shadow.domXpath(tdNodes[k])
}
}
}
}
// 判断 obj必须有key 没有key不进行添加操作
if (!!obj.key) {
arr.push(obj)
}
}
}
return arr
}
var $shadow = new Object();
/**
获取元素的xpath
特性：
- 转换xpath为csspath进行jQuery元素获取
- 仅生成自然表述路径（不支持非、或）
@param dom {String/Dom} 目标元素
@returns {String} dom的xpath路径
*/
$shadow.domXpath = function(dom) {
dom = $(dom).get(0);
var path = "";
for (; dom && dom.nodeType == 1; dom = dom.parentNode) {
var index = 1;
for (var sib = dom.previousSibling; sib; sib = sib.previousSibling) {
if (sib.nodeType == 1 && sib.tagName == dom.tagName)
index++;
}
var xname = dom.tagName.toLowerCase();
if (dom.id) {
xname += "[@id=\"" + dom.id + "\"]";
} else {
if (index > 0)
xname += "[" + index + "]";
}
path = "/" + xname + path;
}
path = path.replace("html[1]/body[1]/", "html/body/");
return path;
};
// 进行循环 找出页面所有table
var tableList = document.querySelectorAll('table')
for (var i = 0; i < tableList.length; i++) {
childNodes(tableList[i], arr)
}
console.log(arr)
</script>
</body>
</html>
