应用错误收集

jQuery代码，用于在检查行时获取其他列的数据

时间：2015-03-25 12:01:56

标签： javascript jquery html css

这是我的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();
    }());

这就是我将静态数据放入表中的方法...... 有人可以帮助我获取剩余行的数据......

2 个答案:

答案 0 :(得分：0)

试试这个例子

JS

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>

答案 1 :(得分：0)

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