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”选择器，您只能获得在表格中检查的输入。迭代它们，找到“最接近（'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

您可以使用复选框：选中选择器和最近选项以查找特定类型的最近元素。

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

selectedRows包含所选表格行的数组

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

4 个答案: