从表的检查行中获取数据

Question

我想从复选框已选中的HTML表的行中获取数据。

Here's my table. It has some hidden fields as well.

目前，我可以获得数据，但它是这样的格式：

SelectedData = ('Samanyou Garg', '2841', '19661', '8110', '2017-04-05', 
'Scientific Computing', 'null', 'M', '0', 'null', 'asdasd', 'undefined', 
'11581', 'Test UK', '2861', '7458', '8110', '2017-07-13', 'Scientific 
Computing', 'null', 'M', '0', 'null', 'gdfg', 'undefined', '11581')

来自多个行的数据使用逗号连接在一起，但我需要像这样分隔来自不同行的数据：

('Samanyou Garg', '2841', '19661', '8110', '2017-04-05', 'Scientific 
Computing', 'null', 'M', '0', 'null', 'asdasd', 'undefined', '11581'), 
('Test UK', '2861', '7458', '8110', '2017-07-13', 'Scientific Computing', 
'null', 'M', '0', 'null', 'gdfg', 'undefined', '11581')

因为我需要将它插入到MySQL表中。

下面是我的表代码：

<table class="table table-striped table-bordered table-list" data-page-length="100">
  <thead>
    <tr>
      <!-- EVENTS TABLE ROW -->
      <th><input type="checkbox" onClick="check(this)" id="selectall" /></th>
      <th class="align_center">Donor Name</th>
      <th class="align_center">Donor Department</th>
      <th class="align_center">Last Donation Date</th>
    </tr>
  </thead>
  <tbody id="allDonors">
  </tbody>
</table>

下面是从我的表中获取数据的代码：

function getAllDonors(requestDeptID, requestID) {
  return JSON.parse($.ajax({
    type: 'GET',
    url: '/admin/getAllRequestDonors/' + requestDeptID + '/' + requestID,
    dataType: 'json',
    async: false,
    data: ({}),
    success: function(msg) {
      ///return msg
      $.each(msg, function(i, value) {
        vHtml = '<tr>'
        vHtml = vHtml + '<td><input type="checkbox" class="bar" name="bar"/></td>'
        vHtml = vHtml + '<td class="full_name">' + value.donor_full_name + '</td>'
        vHtml = vHtml + '<td class="donor_id" style="display:none">' + value.donor_id + '</td>'
        vHtml = vHtml + '<td class="person_id" style="display:none">' + value.donor_person_id + '</td>'
        vHtml = vHtml + '<td class="dept_id" style="display:none">' + value.donor_dept_id + '</td>'
        vHtml = vHtml + '<td class="last_donation_date">' + value.donor_last_donation_date + '</td>'
        vHtml = vHtml + '<td class="dept_name">' + value.donor_dept_name + '</td>'
        vHtml = vHtml + '<td class="last-donation_req_id" style="display:none">' + value.donor_last_donation_req_id + '</td>'
        vHtml = vHtml + '<td class="gender" style="display:none">' + value.donor_gender + '</td>'
        vHtml = vHtml + '<td class="reserve" style="display:none">' + value.donor_reserve + '</td>'
        vHtml = vHtml + '<td class="reserve_req_id" style="display:none">' + value.donor_reserve_req_id + '</td>'
        vHtml = vHtml + '<td class="comment" style="display:none">' + value.donor_comment + '</td>'
        vHtml = vHtml + '<td class="email" style="display:none">' + value.donor_email + '</td>'
        vHtml = vHtml + '<td class="request_id" style="display:none">' + {
          {
            req_id
          }
        } + '</td>'
        vHtml = vHtml + '</tr>'
        $('#allDonors').append(vHtml);
      });

    },
    error: function(msg) {
      alert('There was an error getting potential donors please log out and log back in');
    },
  }).responseText);
};

这是我当前的javascript代码-

$(document).ready(function () {
    $("#addDonor").click(function() {
        myfunc();
    });
});

function myfunc(ele) {
 var values = new Array();
       $.each($("input[name='bar']:checked").closest("td").siblings("td"),
              function () {
                   values.push("'" + $(this).text() + "'");
              });

       var selectedData = [];
       selectedData = "(" + values.join(", ") + ")";
       debugger;
       console.log(selectedData);
    //    postPotentialDonors({{ req_id }},selectedData,'addDonor');
 }

请建议如何做到这一点。

Answer 1

​

function myfunc() {
  var valueList = [];
  $('#allDonors tr').each(function() {
    $(this).find("input[name='bar']:checked").each(function() {
      var values = [];
      $(this).closest("td").siblings("td").each(function() {
        values.push($(this).text());
      });
      valueList.push(values.join(", "));
    });
  });
  console.log("(" + valueList.join("),(") + ")");
}
$("#addDonor").click(function() {
  myfunc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-list" data-page-length="100">
  <thead>
  </thead>
  <tbody id="allDonors">
    <tr>
      <td>
        <input type="checkbox" name="bar" /> </td>
      <td class="align_center">Donor Name</td>
      <td class="align_center">Donor Department</td>
      <td class="align_center">Last Donation Date</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="bar" /> </td>
      <td class="align_center">Donor Name</td>
      <td class="align_center">Donor Department</td>
      <td class="align_center">Last Donation Date</td>
    </tr>
  </tbody>
  <input type="submit" value="Add Donar" id="addDonor" />
</table>

​

这就是你要找的东西吗？为了简单起见，我去掉了ajax调用。