У меня есть следующая таблица, мне нужно получить текстовое значение ячейки рядом с выбранной ячейкой, в основном, если щелкнуть 2, мне нужно показать мне значение ячейки рядом с ней, то есть eric и так далее . В таблице ниже приведен пример данных, которые заполняются динамически, и я не думаю, что могу дать идентификатор конкретному <td>.

$('#inputTable').on('click', 'tbody tr', function (e) {
  e.preventDefault();
  var rowIndex = $(this).find('span').text();
  alert(rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>

Поскольку я не знал, как найти ячейку рядом с выбранной областью, я использовал <span>, чтобы найти значение текста.

1
Valkyrie 26 Ноя 2016 в 12:51

3 ответа

Лучший ответ

Вам необходимо использовать более конкретный селектор (например, body tbody td:first-child) . Это выберет первый <td> элемент в каждом <tr>, и с помощью siblings() мы сможем выбрать следующий элемент в строке.

Следующее будет работать:

$('#inputTable').on('click', 'tbody tr td:first-child', function(e) {  
    var text = $(this).siblings('td').find('span').text();
    alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>

Обратите внимание, что вам также необходимо закрыть элементы <span>, например: <span>jonas</span>

2
BenM 26 Ноя 2016 в 09:55

tbody tr становится tbody td:first-child: если вы хотите прикрепить событие клика только к первому столбцу. tr можно опустить, потому что у вас уже есть tbody, чтобы отличить его от строк заголовка таблицы.

$(this).next().find('span').text(): из первого столбца строки найдите следующий столбец, затем получите содержимое его элемента <span>.

$('#inputTable').on('click', 'tbody td:first-child', function (e) {
  e.preventDefault();
  var rowIndex = $(this).next().find('span').text();
  alert(rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>
1
Nhan 26 Ноя 2016 в 10:05

Попробуйте следующий код:

$(document).ready(function() {
  $('#inputTable tr').on('click', function(e) {
    e.preventDefault();
    var rowIndex = $(this).find('span').text();
    alert(rowIndex);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike<span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric<span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas<span></td>
    </tr>
  </tbody>
</table>
0
Pankaj 26 Ноя 2016 в 09:59