如何使用jquery獲取值單元格？

Question

我有一個帶復選框的數據表，我想顯示表數組，但未顯示“PRIME”字段，在我的示例中，我想顯示表示 0 的 PRIME 單元格的值，請幫助。 這是我的數據表：

 $(document).ready(function() { $('#check_all').on('click', function(e) { if ($(this).is(':checked', true)) { $(".checkbox").prop('checked', true); } else { $(".checkbox").prop('checked', false); } }); $('.checkbox').on('click', function() { if ($('.checkbox:checked').length == $('.checkbox').length) { $('#check_all').prop('checked', true); } else { $('#check_all').prop('checked', false); } }); // jquery code for display array : $("#hide").click(function() { var items = []; $("tr").each(function(i, r) { if (i > 0 && $(r).find("input").first().prop("checked")) { items.push({ "nom": r.cells[1].innerText, "matricule": r.cells[2].innerText, "adresse": r.cells[3].innerText, "prime": r.cells[4].innerText }) } }); console.log(items); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" id="mytable"> <tr> <th><input type="checkbox" id="check_all"></th> <th>nom</th> <th>matricule</th> <th>adresse</th> <th>prime</th> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>najib</td> <td>52</td> <td>tihit</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>adil</td> <td>62</td> <td>tagmast</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>hajar</td> <td>72</td> <td>tizgui</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> </table> <div class="form-group col-md-offset-5 "> <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button> </div>

Answer 1

問題是表中有一個輸入，因此您可以使用.val()訪問它。 在下面的示例中，我在表輸入上使用 jQuery 選擇器，然后使用 jQuery find 獲取輸入元素，然后使用 .val() 獲取其值。

"prime": $(r.cells[4]).find('input').val()

這是一個工作示例

 $(document).ready(function() { $('#check_all').on('click', function(e) { if ($(this).is(':checked', true)) { $(".checkbox").prop('checked', true); } else { $(".checkbox").prop('checked', false); } }); $('.checkbox').on('click', function() { if ($('.checkbox:checked').length == $('.checkbox').length) { $('#check_all').prop('checked', true); } else { $('#check_all').prop('checked', false); } }); // jquery code for display array : $("#hide").click(function() { var items = []; $("tr").each(function(i, r) { if (i > 0 && $(r).find("input").first().prop("checked")) { items.push({ "nom": r.cells[1].innerText, "matricule": r.cells[2].innerText, "adresse": r.cells[3].innerText, "prime": $(r.cells[4]).find('input').val() }) } }); console.log(items); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" id="mytable"> <tr> <th><input type="checkbox" id="check_all"></th> <th>nom</th> <th>matricule</th> <th>adresse</th> <th>prime</th> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>najib</td> <td>52</td> <td>tihit</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>adil</td> <td>62</td> <td>tagmast</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>hajar</td> <td>72</td> <td>tizgui</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> </table> <div class="form-group col-md-offset-5 "> <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button> </div>

Answer 2

可以對您的代碼進行一些錯誤和改進。 見下文：

 $(document).ready(function() { $('#check_all').on('click', function(e) { if ($(this).is(':checked', true)) { $(".checkbox").prop('checked', true); } else { $(".checkbox").prop('checked', false); } }); $('.checkbox').on('click', function() { if ($('.checkbox:checked').length == $('.checkbox').length) { $('#check_all').prop('checked', true); } else { $('#check_all').prop('checked', false); } }); // jquery code for display array : $("#hide").click(function() { var items = []; $("tr").each(function(i, r) { if (i > 0 && $(r).find(".checkbox").prop("checked")) { items.push({ "nom": r.cells[1].innerText, "matricule": r.cells[2].innerText, "adresse": r.cells[3].innerText, "prime": $(r).find(".prime").val() }) } }); console.log(items); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" id="mytable"> <tr> <th><input type="checkbox" id="check_all"></th> <th>nom</th> <th>matricule</th> <th>adresse</th> <th>prime</th> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>najib</td> <td>52</td> <td>tihit</td> <td><input type="text" name="prime" class="form-control prime" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>adil</td> <td>62</td> <td>tagmast</td> <td><input type="text" name="prime" class="form-control prime" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>hajar</td> <td>72</td> <td>tizgui</td> <td><input type="text" name="prime" class="form-control prime" value="0"></td> </tr> </table> <div class="form-group col-md-offset-5 "> <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button> </div>

修復總結：

• 將 class prime添加到您的input name="prime"元素
  • 偏好，不是必需的，可以使用.find("input[name=prime])代替下面
• 調整查找（ $(r).find("input").first()到$(r).find(".checkbox") ）
• 調整邏輯以從輸入中提取值（ $(r).find(".prime").val() ）