我想写一个javascript函数,它可以返回与参数值匹配的HTML表的行号。参数将是列号和相应的单元格值。 以下是HTML表格示例。
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>City</td>
</tr>
<tr>
<td><span>1</span></td>
<td>ABC</td>
<td style="display:none;"><input type="text" value="Pune"/></td>
<td><input type="text" value="Pune"/></td>
</tr>
<tr>
<td><span>2</span></td>
<td>XYZ</td>
<td style="display:none;"><input type="text" value="Pune"/></td>
<td><input type="text" value="Pune"/></td>
</tr>
</table>
使用此表,我想调用javascript函数FindRowNumber(列号1,对应的单元格值1,列号no2,对应的单元格值2);
示例: - FindRowNumber(1,&#34; 2&#34;,3,&#34; Pune&#34;);应返回第2行。
答案 0 :(得分:0)
您可以使用Jquery来完成。您可能将e1和e3作为td
索引,将e2和e4作为td
文本,然后此代码就像您的查询一样。
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
function FindRowNumber(e1,e2,e3,e4)
{
var aReturn = false;
$('table tr').each(function( index ){
var a = $(this).children('td').eq(e1 - 1).text();
var b = $(this).children('td').eq(e3 - 1).text();
if(a == e2 && b == e4)
{
aReturn = index;
}
});
return(aReturn);
}
var a= FindRowNumber(1,"2",3,"Pune");
console.log(a);
</script>
答案 1 :(得分:0)
如果你可以使用jQuery,你可以使用像这样的选择器tr:has(td:eq([cell1Index]):contains([cell1Value])):has(td:eq([cell2Index]):contains([cell2Value]))
这样做:这是一个例子:
var rowIndex = $("tr:has(td:eq(0):contains('1')):has(td:eq(2):contains('Pune'))").index()
在此示例中,索引从0
开始。
在vanilla JavaScript中,您可以使用以下内容执行相同的操作:
function getRowIndex(cell1Index, cell1Value, cell2Index, cell2Value){
var index = -1;
var rows = document.querySelectorAll("tr");
for(var i = 0; i < rows.length; i++){
var cell1 = rows[i].querySelector("td:nth-child("+cell1Index+")");
var cell2 = rows[i].querySelector("td:nth-child("+cell2Index+")");
if(cell1 && cell1.textContent == cell1Value && cell2 && cell2.textContent == cell2Value){
index = i;
break;
}
}
return index;
}
console.log(getRowIndex(1, "1", 3, "Pune"));
&#13;
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>City</td>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>Pune</td>
</tr>
<tr>
<td>2</td>
<td>XYZ</td>
<td>Pune</td>
</tr>
</table>
&#13;
此处,单元格索引从1
开始,但行索引从0
开始。您可以将1
添加到函数的返回值,以使所有索引都从1
开始;
答案 2 :(得分:0)
您最初的问题是:如何使用javascript解析HTML表格。
为此,您可以先查看以下答案:JavaScript HTML table parsing
修改后,您想从<td>...</td>
我建议您为每个列编写特定的函数,并将它们存储在各自索引的数组中。
然后你的代码看起来像:
let getValue = [
(e) => ..., // write your function for Id here
(e) => e.textContent, // getter for Name value
(e) => ... // write your function for City here
];
function FindRowNumber (c1, v1, c2, v2) {
let table = document.getElementsByTagName("table")[0];
let rows = table.querySelectorAll("tr");
return rows.reduce((acc, row, idx) => {
if ( acc !== null ) return acc; // match already found
let cols = row.querySelectorAll("td");
if ( !(getValue[c1](cols[c1]) === v1 && getValue[c2](cols[c2]) === v2) ) // non-matching row
return acc;
return idx; // match found!
}, null);
}