如何使用 jQuery 获取选定的行？

Question

这是我的表格tbody 中的表格行。我得到下拉值，文本值，但我无法获得选定的行值。我的行值返回“未定义”。

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

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