javascript - 选中行时获取其他列数据的jQuery代码

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

HTML

<!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>

jQuery

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());
    }
  });
}

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>

Plunker demo

关于javascript - 选中行时获取其他列数据的jQuery代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29255113/

javascript - 选中行时获取其他列数据的jQuery代码

HTML

上一篇：html - 位置 div margin top 30px 但使用 margin auto 将 margin 保持在中心？

下一篇：css - 行高从顶部移动相邻的 div