javascript - 同一行不同列(jQuery)

Question

表包含昵称和 ID。

给定一个昵称，我正在查找它的 ID。

但是，我的解决方案仅在“ID”列位于“昵称”列旁边时才有效。这些列将来可能会改变位置。

因此，如何更新代码以使列位置无关紧要？

注意:列名称永远不会改变，只有它们的位置可能会改变。

// Given a Nickname, lookup its ID. 


// Example of a nickname
let exampleN = "A";

// Find the <th> with the text "Nickname"
columnHeader = $("#table1 th:contains('Nickname')");

// Get the index & increment by 1 to match nth-child indexing
columnIndex = columnHeader.index() + 1;

// Loop through each element in that index...
$('#table1 tr td:nth-child(' + columnIndex + ')').each(function() {


  if ($(this).text() === exampleN) { // if match is found...
    let ID = $(this).next().text(); // get the <td> next to that <td>
    alert("The ID for that nickname is " + ID);
    return false; // exits loop after condition is met
  } else {
    alert("No match was found for that nickname.");
    return false; // exits loop after condition is met
  }

})

th {
  font-weight: bold;
  width: 11em;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <th>Nickname</th>
    <th>ID</th>
  </tr>
  <tr>
    <td>A</td>
    <td>1</td>
  </tr>
  <tr>
    <td>B</td>
    <td>2</td>
  </tr>
  <tr>
    <td>C</td>
    <td>3</td>
  </tr>
  <tr>
    <td>D</td>
    <td>4</td>
  </tr>
</table>

View on jsFiddle

Answer 1

一个想法是识别“nickname”和“id”的列索引。
然后您可以引用这些索引将昵称映射到 id。

let exampleN = "C";

// Given a Nickname, lookup its ID. 

let colKey = $("#table1 th:contains('Nickname')").index();
let colVal = $("#table1 th:contains('ID')").index();
let id;

// Loop through each "nickname" cell ...
$('#table1 tr td:nth-child(' + (colKey + 1) + ')').each(function() {

  if ($(this).text() === exampleN) { // if match is found...
    // set id and end loop
    id = $(this).siblings('td').addBack().eq(colVal).text();
    return false;
  }

})

// if id was found, display it.
if (id) {
  console.log("The ID for " + exampleN + " is " + id);
} else {
  console.log("No match was found for that nickname.");
}

th {
  font-weight: bold;
  width: 11em;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <th>Other></th>
    <th>Nickname</th>
    <th>Another</th>
    <th>ID</th>
  </tr>
  <tr>
    <td>n/a</td>
    <td>A</td>
    <td>n/a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>n/a</td>
    <td>B</td>
    <td>n/a</td>
    <td>2</td>
  </tr>
  <tr>
    <td>n/a</td>
    <td>C</td>
    <td>n/a</td>
    <td>3</td>
  </tr>
  <tr>
    <td>n/a</td>
    <td>D</td>
    <td>n/a</td>
    <td>4</td>
  </tr>
</table>

<小时/>

如果您只想将 ID 与昵称关联起来，或者如果您在同一个表上执行多次搜索，则可能需要考虑构建所有相关表数据的数组。然后您可以使用该数组执行查找。

这是一个演示:

// Search dataset by nickname and output id
function searchNicknames(data, search) {

  let match = data.filter(data => data.nickname == search);

  // If a match is found, display it
  if (match[0]) {
    console.log("The ID for " + match[0].nickname + " is " + match[0].id);
  } else {
    console.log("No match was found for " + search + ".");
  }

}


// Determine column indexes
let colKey = $("#table1 th:contains('Nickname')").index();
let colVal = $("#table1 th:contains('ID')").index();

// Build array of table data
let tableData = $('#table1 tr td:nth-child(' + (colKey + 1) + ')').map(function() {

  return {
    'nickname': $(this).text(),
    'id': $(this).siblings('td').addBack().eq(colVal).text()
  };

}).get();


// Search by nickname
searchNicknames(tableData, 'C');
searchNicknames(tableData, 'B');
searchNicknames(tableData, 'F');

th {
  font-weight: bold;
  width: 11em;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table1">
  <tr><th>ID</th><th>Other</th><th>Nickname</th><th>Another</th></tr>
  <tr> <td>1</td><td>n/a</td><td>A</td><td>n/a</td></tr>
  <tr><td>2</td><td>n/a</td><td>B</td><td>n/a</td></tr>
  <tr><td>3</td><td>n/a</td><td>C</td><td>n/a</td></tr>
  <tr><td>4</td><td>n/a</td><td>D</td><td>n/a</td></tr>
</table>