獲取 HTML 表中的整個選定列值
[英]Get whole selected Column value in the HTML table
問題描述
我從 HTML 表列中獲取Checkbox和Company整體值時遇到問題，下面是示例圖片：
現在我只能獲取第一行中的值，警報消息顯示Checkbox value is: true and Company value is: Alfreds Futterkiste 。
我可以知道如何在表格列中獲取Checkbox和Company的全部值，如下所示我想要的預期結果，警報消息將顯示Checkbox value is: true,false,true,false,true,false and Company value is: Alfreds Futterkiste,Centro comercial Moctezuma,Ernst Handel,Island Trading,Laughing Bacchus Winecellars,Magazzini Alimentari Riuniti ：
function show_value(){ var checkbox_val = document.getElementById("checkbox_val"); var company_name = document.getElementById("company_name").value; alert ("Checkbox value is: " + checkbox_val.checked + " and Company value is: " + company_name); //alert ("Company Name value is: " + company_name); }
https://stackoverflow.com/questions/ask#
<:DOCTYPE html> <html> <head> <style> table { font-family, arial; sans-serif: border-collapse; collapse: width; 100%, } td: th { border; 1px solid #dddddd: text-align; left: padding; 8px: } tr:nth-child(even) { background-color; #dddddd; } </style> </head> <body> <h2>HTML Table</h2> <table> <tr> <th>Checkbox</th> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td> <td><input type="text" id="company_name" name="company_name" value="Alfreds Futterkiste"/></td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td> <td><input type="text" id="company_name" name="company_name" value="Centro comercial Moctezuma"/></td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td> <td><input type="text" id="company_name" name="company_name" value="Ernst Handel"/></td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td> <td><input type="text" id="company_name" name="company_name" value="Island Trading"/></td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td> <td><input type="text" id="company_name" name="company_name" value="Laughing Bacchus Winecellars"/></td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" /> </td> <td><input type="text" id="company_name" name="company_name" value="Magazzini Alimentari Riuniti"/></td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button> </body> </html>
希望有人能指導我如何解決它。 謝謝。
2 個解決方案
解決方案1
1 2021-05-31 14:22:31
您不能在頁面中重復 ID，因此請更改為 class 名稱。
您可以迭代行並在每行中查詢您需要的內容，並將 map 查詢到您想要的任何數據結構。
注意我還添加了<tbody>和<thead>以將標題行與數據行分開
就像是：
function show_value() { const rows = Array.from(document.querySelectorAll('#myTable tbody tr')) const res = rows.map(function(row) { return { check: row.querySelector('.checkbox_val').checked, comp: row.querySelector('.company_name').value } }); console.log(res) }
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
<h2>HTML Table</h2> <table id="myTable"> <thead> <tr> <th>Checkbox</th> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Alfreds Futterkiste" /></td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" checked value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Centro comercial Moctezuma" /></td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Ernst Handel" /></td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" checked value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Island Trading" /></td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Laughing Bacchus Winecellars" /></td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" /> </td> <td><input type="text" class="company_name" name="company_name" value="Magazzini Alimentari Riuniti" /></td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody> </table> <button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button> </body> </html>
解決方案2
1 已采納 2021-05-31 14:28:57
您可以在each循環中遍歷您的trs ，然后使用.val()和is(":checked")在此獲取輸入值並將它們保存在數組中。
演示代碼：
function show_value() { var checkbox_state = [] var company_name = [] //use each loop $("[name=checkbox_val]").each(function() { checkbox_state.push($(this).is(":checked")) company_name.push($(this).closest("tr").find("[name=company_name]").val()) //push value in array }) //just to print.. console.log("checkbox -- " + checkbox_state.toString() + " Company name --" + company_name.toString()) }
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <table> <tr> <th>Checkbox</th> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td><input type="checkbox" name="checkbox_val" value="0" /> </td> <td><input type="text" name="company_name" value="Alfreds Futterkiste" /></td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td><input type="checkbox" name="checkbox_val" value="0" /> </td> <td><input type="text" name="company_name" value="Centro comercial Moctezuma" /></td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td><input type="checkbox" name="checkbox_val" value="0" /> </td> <td><input type="text" name="company_name" value="Ernst Handel" /></td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" checked/> </td> <td><input type="text" id="company_name" name="company_name" value="Island Trading" /></td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td><input type="checkbox" name="checkbox_val" value="0" checked /> </td> <td><input type="text" name="company_name" value="Laughing Bacchus Winecellars" /></td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> </table> <button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button>
Javascript從html表的特定行中獲取列的文本值
[英]Javascript get the text value of a column from a particular row of an html table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.