与えられた複数のセルの値と一致するhtmlテーブルから行番号を取得

Question

パラメータ値と一致するHTMLテーブルの行番号を返すことができる1つのjavascript関数を記述したいと思います。パラメータは列番号と対応するセルの値になります。 次のサンプル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> 

、IはFindRowNumber（列NO1、対応するセルの値1、列NO2、セル値2に対応する）JavaScript関数を呼び出したいです。
例： - FindRowNumber（1、 "2"、3、 "Pune"）;行番号2が返されます。

Answer 1

：

次に、あなたのコードは次のように見ることができ

function findRowNumber(cn1, v1, cn2, v2){ 
 
    var table = document.querySelector('#table'); 
 
    var rows = table.querySelectorAll("tr"); 
 
    var msg = "No such row exist" 
 
    for(i=1;i<rows.length;i++){ 
 
    var tableData = rows[i].querySelectorAll("td"); 
 
    if(tableData[cn1-1].textContent==v1 && tableData[cn2].children[0].value==v2){ 
 
     msg = i; 
 
     break; 
 
    } 
 
    } 
 
    return msg; 
 
} 
 

 
console.log(findRowNumber(1,"2",3,"Pune"));

table{ 
 
    font-family: Verdana; 
 
    font-size: 13px; 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
} 
 
th,td{ 
 
    border: 1px solid #ccc; 
 
    padding: 10px; 
 
}

<table id="table"> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
     <th>City</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>ABC</td> 
 
     <td style="display:none;"></td> 
 
     <td><input type="text" value="Delhi"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>XYZ</td> 
 
     <td style="display:none;"></td> 
 
     <td><input type="text" value="Pune"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>PQR</td> 
 
     <td style="display:none;"></td> 
 
     <td><input type="text" value="Mumbai"/></td> 
 
    </tr> 
 
</table>

Answer 2

これは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 3

document/Element.querySelectorAllコレクションなどの要素にアクセスするために使用することができ、index各要素にアクセスするために使用することができます。提供される例において

Iは1から始まるインデックスを操作することは不必要であると感じたように、0索引が考慮されます。

function FindRowNumber(colNum1, colNum1Value, colNum2, colNum2Value) { 
 
    var elems = document.querySelectorAll('tr'); 
 
    for (var i = 0, iLen = elems.length; i < iLen; i++) { 
 
    var tdElems = elems[i].querySelectorAll('td'); 
 
    if (tdElems[colNum1].textContent === colNum1Value && tdElems[colNum2].textContent === colNum2Value) { 
 
     return i; 
 
    } 
 
    } 
 
} 
 

 
console.log(FindRowNumber(0, "1", 2, "Pune"));

<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>

Answer 4

あなたは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からスタート。

はバニラ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"));

<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>

、セルインデックスは1から始めるが、行インデックスが0からスタート。関数の戻り値に1を追加すると、すべてのインデックスが1から始まります。

Answer 5

あなたの最初の質問は、どのようにHTMLテーブルをJavaScriptで解析するかです。私はあなたが特定の機能をコーディング示唆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); 
}