Javascript 检查行时获取其他列数据的jQuery代码_Javascript_Jquery_Html_Css

Javascript 检查行时获取其他列数据的jQuery代码

javascript jquery html css

Javascript 检查行时获取其他列数据的jQuery代码,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的html代码，我想获取选中复选框的行的数据 HTML 扩大美联储美联储成员服务集可用设备地位添加 jQuery var FedExpandView=（函数（）{ var EXPAND='#因此fedExpand EXPAND button'；函数FedExpandView（）{ this.init=函数（）{ $（展开）.on（'click'，onExpand）； var data=[{SSet:“服务集1”，设备：“46”，状态：“在线”}， {SSet:“服务集2”，

这是我的html代码，我想获取选中复选框的行的数据

HTML


扩大美联储
美联储成员
服务集
可用设备
地位
添加

jQuery

var FedExpandView=（函数（）{
var EXPAND='#因此fedExpand EXPAND button'；
函数FedExpandView（）{
this.init=函数（）{
$（展开）.on（'click'，onExpand）；
var data=[{SSet:“服务集1”，设备：“46”，状态：“在线”}，
{SSet:“服务集2”，设备：“47”，状态：“在线”}，
{SSet:“服务集3”，设备：“48”，状态：“在线”}；
$（“#我的表”）.dataTable({
bPaginate:false，
过滤：错，
宾福：错，
aaData：数据，
AO列：[
{mDataProp:'SSet'，id:'so fed ss'}，
{mDataProp:'ADevices'，id:'so fed adev'}，
{mDataProp:'Status'，id:'so fed Status'}，
{sDefaultContent:''，
fnRender:函数（oObj）{
return'试试这个例子
JS
HTML

行1数据1
第1行数据2
第2行数据1
第2行数据2
第3行数据1
第3行数据2
检查表

我实际上希望所有数据都在一个变量中，这样我就可以在下一页中以表格的形式显示，而不带复选框…请准确解释您想做什么。问题是不明确的，在一个地方它提到行数据，在另一个地方它提到列数据我有4列，其中一列是复选框，如果复选框被选中，我想o获取该行其余列的数据..这样我就可以在下一页中显示它们，而不必勾选复选框..以确认它们已被选中。为什么不循环所有tr并存储所有有复选框的行呢？例如：$.each（$（'#my table tr'），function（idx，elem）{if（elem.find（'input'）。is（':checked'）{//Do stuff}）；
<!DOCTYPE html>
<html>
<body>
  <div >
    <header>
      <h1>
          <span>Expand Fed</span>
      </h1>
    </header>
    <h1>
    <span>Fed Members </span> 
    </h1>

    <table id="my-table">
        <thead>
            <tr>
              <td>Service Set</td>
              <td>Available Devices</td>
              <td>Status</td>
              <td>Add</td>
            </tr>
        </thead>
    </table>

    <footer>
      <div> 
        <input id="so-fedExpand-expand-button" class="button primary" type="submit" value="Expand"/>
        <a href="#/_return_to_previous" class="button">Cancel</a>
      </div>
    </footer>
  </div>
</body>
</html>

var FedExpandView = (function() {
    var EXPAND = '#so-fedExpand-expand-button';
    function FedExpandView() {
    this.init = function () {
    $(EXPAND).on('click', onExpand);
    var data = [{ SSet: "Service Set 1", ADevices: '46', Status: "Online"},
                { SSet: "Service Set 2", ADevices: '47', Status: "Online"},
                { SSet: "Service Set 3", ADevices: '48', Status: "Online"}];
    $('#my-table').dataTable({
                    bPaginate : false,
                    bFilter : false,
                    bInfo : false,
                    aaData: data,
                    aoColumns : [
                        {mDataProp: 'SSet', id: 'so-fed-ss'},
                        {mDataProp: 'ADevices', id: 'so-fed-adev'},
                        {mDataProp: 'Status', id: 'so-fed-status'},
                        {sDefaultContent: '',
                        fnRender: function (oObj) {
                            return '<input type="checkbox" id="so-fed-checkbox" name="select"">';
                        },
                        sWidth: '10px', sClass: "icon"}
                    ]
                }).rowReordering().
                addClass('reorderable');

            $('#my-table tbody tr').first().addClass('selected');
            this.resume();
            }
   this.resume = function () {
            }
        }
         return new FedExpandView();
    }());

function checkTable() {
  var rowElem;

  $('#my-table tr').each(function(idx, elem) {
    rowElem = $(elem);

    if(rowElem.find('input').is(':checked')) {
      console.log('row ' + (idx + 1) + ' is checked');
      console.log('data1 is: ' + rowElem.find('.data1').html());
      console.log('data2 is: ' + rowElem.find('.data2').html());
    }
  });
}

<table id="my-table">
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td class="data1">Row1 Data1</td>
    <td class="data2">Row1 Data2</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td class="data1">Row2 Data1</td>
    <td class="data2">Row2 Data2</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td class="data1">Row3 Data1</td>
    <td class="data2">Row3 Data2</td>
  </tr>
</table>

<button onclick="checkTable()">Check table</button>

            $("#my-table tbody tr").on('click', function (event) {
                serviceSets.length = 0;
                var rows = $('table tr td :checkbox:checked').map(function () {
                    return $(this).val();
                }).get();
                $( rows ).each(function() {
                    var that = this;
                    $( Tabledata ).each(function() {
                    if(that == this.ssid)
                    {
                        serviceSets.push(this);
                    }
                    });
                }); 
            });