В той же строке другой столбец (jQuery) - PullRequest
Новая
       7

В той же строке другой столбец (jQuery)

0 голосов
/ 16 апреля 2020

Таблица содержит псевдонимы и идентификаторы.

При заданном псевдониме я ищу его идентификатор.

Однако мое решение работает только в том случае, если столбец «ID» находится рядом со столбцом «Nickname». Столбцы могут изменить положение в будущем.

Таким образом, как мне обновить мой код, чтобы положение столбцов не имело значения?

Примечание: столбец имена никогда не изменится, может измениться только их позиция. 

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

Посмотреть на jsFiddle

1 Ответ

1 голос
/ 16 апреля 2020

Одна идея состоит в том, чтобы идентифицировать индексы столбцов для «псевдонима» и «идентификатора».
Затем вы можете ссылаться на эти индексы для сопоставления псевдонимов с идентификаторами. 

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>

Если вы просто хотите связать идентификаторы с псевдонимами или если вы выполняете несколько поисков по одной и той же таблице, вы можете захотеть рассмотреть вопрос о создании массива всех соответствующих данных таблицы. Затем вы можете выполнять поиск с использованием этого массива.

Вот демонстрация: 

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