从html表中检索与给定的多个单元格值匹配的行号

时间:2017-11-27 06:36:21

标签: javascript html

我想写一个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行。

3 个答案:

答案 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中,您可以使用以下内容执行相同的操作:

&#13;
&#13;
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;
&#13;
&#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);
}