在jquery

Question

我试图使用jQuery将HTML表的已检查行仅推送到数组。我需要将数组索引作为表头，并将值作为相应头的已检查列shell的shell值。

我有HTML表格：

<table class="table table-bordered" id="checkTable">
          <thead>
            <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
            <th>Programming Languages</th>
            <th>Popularity</th>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Java</td>
              <td>62%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Python</td>
              <td>46%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>JavaScript</td>
              <td>38%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>C++</td>
              <td>31%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>C#</td>
              <td>27%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>PHP</td>
              <td>14%</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="table-checkbox"></td>
              <td>Pearl</td>
              <td>14%</td>
            </tr>
          </tbody>
        </table>
        <button id='pushToArray'>Push To Array</button>

现在我需要将索引值作为相应列的表头推送到表的选定行。

$('div#tableContainer').find('button#pushToArray').on('click', function(){
        var array = new Array();
        var headers = new Array();
        table.find('th').each(function(index, item) {
            if(index == 0)
            {
                return true;
            }
            else
            {
                headers[index] = $(item).html();
            }
        });

            var valueList = [];
        table.find('tbody tr').each(function() {
            $(this).find('input.table-checkbox:checked').each(function(){
                var values = [];
                $(this).closest('td').siblings('td').each(function(index, item){
                    values[headers[index]] = $(item).html();
                });
                valueList.push(values);
            });
        });
        console.log(valueList);
    });

我成功构建了标题，但在索引时我将我的数组作为

[…]​
0: []​​
"Programming Languages": "14%"​​
length: 0​​
undefined: "PHP"​​
__proto__: Array []​
length: 1​
__proto__: Array []

什么是以我想要的方式把事情做好的最佳方式。

$('div#tableContainer').find('button#pushToArray').on('click', function() {
  var array = new Array();
  var headers = new Array();
  table.find('th').each(function(index, item) {
    if (index == 0) {
      return true;
    } else {
      headers[index] = $(item).html();
    }
  });

  var valueList = [];
  table.find('tbody tr').each(function() {
    $(this).find('input.table-checkbox:checked').each(function() {
      var values = [];
      $(this).closest('td').siblings('td').each(function(index, item) {
        values[headers[index]] = $(item).html();
      });
      valueList.push(values);
    });
  });
  console.log(valueList);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="checkTable">
  <thead>
    <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
    <th>Programming Languages</th>
    <th>Popularity</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Java</td>
      <td>62%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Python</td>
      <td>46%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>JavaScript</td>
      <td>38%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C++</td>
      <td>31%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C#</td>
      <td>27%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>PHP</td>
      <td>14%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Pearl</td>
      <td>14%</td>
    </tr>
  </tbody>
</table>
<button id='pushToArray'>Push To Array</button>

Answer 1

如果您想要选中编程语言，可以使用:checked选择器来获取所有选中的复选框。 map获取下一个<td>

的文本文本

＆＃13;

＆＃13;

$('#pushToArray').click(function() {
	
//Get all headers that dont contain checkAll checkbox
var headers = $("#checkTable thead th").filter(function(){
    return !$(this).find('#checkAll').length;
}).map(function(){
    return $(this).text().trim();
}).get();


//Loop thru the checked checkboxes
var arr = $('#checkTable .table-checkbox:checked').map(function(){ 
    var obj = {};
			
    $(this).parent().siblings().each(function(i){
          obj[ headers[i] ] = $(this).text().trim();
    })
			 
    return obj;
}).get();

console.log(arr);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="checkTable">
  <thead>
    <th style="width:20px;"><input type="checkbox" name="headercheck" id="checkAll"></th>
    <th>Programming Languages</th>
    <th>Popularity</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Java</td>
      <td>62%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Python</td>
      <td>46%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>JavaScript</td>
      <td>38%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C++</td>
      <td>31%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>C#</td>
      <td>27%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>PHP</td>
      <td>14%</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="table-checkbox"></td>
      <td>Pearl</td>
      <td>14%</td>
    </tr>
  </tbody>
</table>
<button id='pushToArray'>Push To Array</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我使用循环来推送数组中的标题，并使用另一个循环来获取表体值，忽略复选框，如下所示：

$('div#tableContainer').find('button#pushToArray').on('click', function(){
    console.log("Cool");
    var array = [];
    var headers = [];
    $('#checkTable th').each(function(index, item) {
        if(index == 0)
            {
                return true;
            }
            else
            {
                headers[index] = $(item).html();
            }
    });
    $('#checkTable tr').has('td input.table-checkbox:checked').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            if(index == 0)
            {
                return true;
            }
            else
            {
                arrayItem[headers[index]] = $(item).html();
            }
        });
        array.push(arrayItem);
    });
    console.log(array);
});