Question

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

Answer 1

您可以使用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>

Answer 2

如果你可以使用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;

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开始;

Answer 3

您最初的问题是：如何使用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);
}

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

3 个答案: