javascript - 如何仅处理表中已检查的行？

Question

假设我有下表：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td><input type="checkbox"/> A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td><input type="checkbox"/> B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td><input type="checkbox"/> C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

我只想从表中为选中复选框的行生成 JSON。我为“在此处插入支票”输入了什么？

var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  myRows[index] = {};
  $cells.each(function(cellIndex) {
    // Insert Check Here
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));​

Answer 1

尝试：

var selectedRowsHTML = "";

$('table input:checked').each(function() {
  selectedRowsHTML += $(this).closest('tr').html();
});

console.log("This is the HTML for selected rows: "+ selectedRowsHTML);

使用 ":checked" 选择器，您只能获得在表格中检查的输入。遍历它们，找到带有“closest('tr')”的父行。仅此而已，您可以获得每一行的 HTML（或您想要对它们执行的任何操作）。

Answer 2

我添加了一个 If 语句来测试 TD 是否包含选中的复选框，请参阅代码中的注释

// Loop through grabbing everything
    var myRows = [];
    var $headers = $("th");
    var $rows = $("tbody tr").each(function(index) {
      $cells = $(this).find("td");
      myRows[index] = {};
      $cells.each(function(cellIndex) {
         if($(this).find('checkbox').is(':checked')) //Find the checkbox within the TD and test if it's checked or not
         {
           myRows[index][$($headers[cellIndex]).html()] = $(this).html();
         }
      });    
    });

// Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj));​

Answer 3

这样怎么样

$("table input:checked")  //filter based on your requirement
.each(function()
{
  var td=$(this).parent();  //gets the `td`, do the necessary
});

Answer 4

您可以使用 checkbox:checked 选择器和最接近来查找特定类型的最近元素。

var selectedRows = [];
$('table input:checkbox:checked').each(function() {
  selectedRows.push($(this).closest('tr'))
});

selectedRows 包含选定表行的数组