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

Question

This is my table row within the tbody of my table. I get dropdown value, text value but I can't get selected row value. My row value returns "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>

Answer 1

Part of the issue is because tr elements do not have a value attribute. To do what you require you could use a data attribute instead, to store custom metadata on the element. The other part is that this is a reference to the tr element. You're then calling find() on the element you're looking to target, so it will not be found as that method looks for descendants only.

In addition it's worth noting that you can make the logic more succinct by using map() to build the array instead of explicitly looping with each() and also that it would be better practice to store objects in the array and only JSON encode it before transferring via 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>