Как я могу получить выбранную строку с помощью jQuery?

#javascript #html #jquery #css #html-table

#javascript #HTML #jquery #css #html-таблица

Вопрос:

Это строка моей таблицы внутри tbody моей таблицы. Я получаю выпадающее значение, текстовое значение, но не могу получить выбранное значение строки. Мое значение строки возвращает «undefined».

 $(document).on("click", "#skorKartDegerle", function() {
  $("#modal_evaluation").modal("show");
});

$(document).on("click", "#btnKaydet", function() {
  var arrList = [];
  var isEmptyAnswer = false;

  $("#evaluationTable > tbody > tr").each(function() {
    var line = $(this).find(".answerLine").val();
    var ddlVal = $(this).find(".answerddl").val();
    var txtVal = $(this).find(".answertxt").val();

    var obj = '{"line":"'   line   '","ddlVal":"'   ddlVal   '","txtVal":"'   txtVal   '"}';
    arrList.push(obj);
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="answerLine" value="2">
      <td>FR002</td>
      <td>Koton Mağazacılık</td>
      <td>1800</td>
      <td>A</td>
      <td>Kabul</td>
      <td class="select" value="0">
        <select class="answerddl">
          <option value="1">Kabul</option>
          <option value="2">Ret</option>
        </select>
      </td>
      <td><input type="text" class="answertxt"></td>
    </tr>
  </tbody>
</table>

Развернуть фрагмент

Ответ №1:

Часть проблемы заключается в том, что tr элементы не имеют value атрибута. Чтобы сделать то, что вам требуется, вы могли data бы вместо этого использовать атрибут для хранения пользовательских метаданных в элементе. Другая часть — это this ссылка на tr элемент. Затем вы вызываете find() элемент, на который хотите настроить таргетинг, поэтому он не будет найден, поскольку этот метод ищет только потомков.

Кроме того, стоит отметить, что вы можете сделать логику более сжатой, используя map() для построения массива вместо явного зацикливания, each() а также, что было бы лучше хранить объекты в массиве и только кодировать их в формате JSON перед передачей через AJAX.

 $(document).on("click", "#btnKaydet", function() {
  var isEmptyAnswer = false;

  let arrList = $("#evaluationTable > tbody > tr").map((i, tr) => {
    let $tr = $(tr);
    return {
      line: $tr.data('value'),
      ddlVal: $tr.find(".answerddl").val(),
      txtVal: $tr.find(".answertxt").val()
    }
  }).get();
  
  console.log(arrList);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="evaluationTable">
  <tbody>
    <tr class="answerLine" data-value="2">
      <td>FR002</td>
      <td>Koton Mağazacılık</td>
      <td>1800</td>
      <td>A</td>
      <td>Kabul</td>
      <td class="select" value="0">
        <select class="answerddl">
          <option value="1">Kabul</option>
          <option value="2">Ret</option>
        </select>
      </td>
      <td><input type="text" class="answertxt"></td>
    </tr>
  </tbody>
</table>

<button id="btnKaydet">Click me</button>

Развернуть фрагмент

1. Я изменился, как вы показываете, но я по-прежнему получаю строку как «неопределенную»

2. Сделайте его доступным для выполнения фрагментом или используйте jsfiddle.net

3. @FSDford и Рори, когда я использую фрагмент кода run под вашим кодом, вы видите, что строка все еще не определена.

4. Спасибо, это работает, но не работает в моей ide. Можете ли вы поделиться со мной ссылкой на чат? Если вы проверите мой код, было бы лучше

5. Пожалуйста, добавьте свой полный код к вопросу. Кроме того, проверьте консоль на наличие ошибок