检查行时从表中的特定列获取数据答案

【问题标题】：Get data from specific columns in table when row checked检查行时从表中的特定列获取数据
【发布时间】：2019-04-22 19:56:21
【问题描述】：

我需要从一行中的特定表列中获取。所有数据都应该被推入一个数组。我应该从不同列（1,3,4）的每个选中行中获取数据。第 4 列包含下拉选项，它应该只采用选定的值。我很难让这个功能工作，如果我只有一列，它就可以工作。我在从中检索数据时遇到了麻烦，它从选项值中检索所有数据，我应该只获得选定的值。

function getData() {

  // Enumerate over each checked checkbox
  $('input:checked').each(function() {
    var row = [];

    $(this).closest('tr').find('td:eq(5)').each(function() {

      row.push($(this).text());

    });

    // Add this row to our list of rows
    rows.push(row);

    //debugger;
  });
  console.log(row);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>#</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="1"></td>
    <td>Jill</td>
    <td>Smith</td>
    <td>20</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="2"></td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>14</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="3"></td>
    <td>Amanda</td>
    <td>Jac</td>
    <td>14</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
    </td>
  </tr>
</table>
<button type="button" onclick="getData()">Submit</button>

函数只显示一列中的数据。如果我添加 .'td:eg(6)' 我得到空数组

【问题讨论】：

请分享minimal reproducible example。您的 javascript 不足以运行代码并了解问题所在。
@Oram 我更新了代码
@Bruno 你想要包含一行中所有数据的对象数组还是只包含选定的下拉值？
@MohanRajput 我想要一个包含来自第 1、3 和 4 列（名字、年龄、国家）的数据的数组，该数组被选中的下拉值

标签： javascript jquery

【解决方案1】：

这是您如何在单击按钮时获得所有选定值的方法。只需遍历所有 tr 并在其中找到 select 并获取 value 。

function getData(){
  $("tr").each(function() {
     if($(this).find("select")){
      console.log($(this).find("select").val())
     } 
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
  <tr>
    <th>#</th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="1"></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>20</td>
    <td>
      <select class="select-cls" id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="2"></td>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>14</td>
    <td>
      <select  id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="3"></td>
    <td>Amanda</td>
    <td>Jac</td> 
    <td>14</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
</table>
  <button type="button" onclick="getData()">Submit</button>

【讨论】：

【解决方案2】：

我在这里尝试您的结果以获取选择行 dropdwun 值。

function getData(){
var rows=[];

    // Enumerate over each checked checkbox
    $('input:checked').each(function () {
        var row = [];

       var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
	   var fname=$(this).closest('tr').find('td:nth-child(2)').text();
	   var lname=$(this).closest('tr').find('td:nth-child(3)').text();
	   var age=$(this).closest('tr').find('td:nth-child(4)').text();
	   var vals=[fname ,lname, age, cnty];
            row.push(vals);



        // Add this row to our list of rows
        rows.push(row);

        //debugger;
    });
    console.log(rows);

}

<table >
  <tr>
    <th>#</th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="1"></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>20</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="2"></td>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>14</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox" value="3"></td>
    <td>Amanda</td>
    <td>Jac</td> 
    <td>14</td>
    <td>
      <select id="country">
        <option value='1'>Germany</option>
        <option value='2'>England</option>
        <option value='3'>Croatia</option>
        <option value='4'>USA</option>
      </select>
      </td>
  </tr>
</table>
  <button type="button" onclick="getData()">Submit</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

谢谢，我需要一个数组，其中包含来自第 1、3 和 4 列（名字、年龄、国家）的数据，这是选定的下拉值。您的解决方案效果不佳，它没有提供任何数据。
我编辑了上面的代码。请检查它是否对您有帮助。
正是我想要的

【解决方案3】：

@Bruno 您的情况略有不同，为了获得所需的结果，我更新了您的按钮单击事件代码，如下所示。

$("#btnSubmit").click(function(){
    var rows = [];

$('input:checked').each(function() {
    var row = $(this).parent().parent();
    
    var data = {};
        $(row).find("td").each(function(i,obj){
            if(i == 1){
                data.name = $(this).text();
        }
        else if(i == 3){
                data.age = $(this).text();
        }
        else if(i == 4){
                data.country = $(this).find("select").val();
        }
    })
            
    rows.push(data);
  })
  console.log(rows);
})

在将其实施到您的代码之前，您可以在JS Fiddle Demo 上播放它。

在小提琴演示打开控制台 [F12] 中，您可以在数组中查看所选行值的列表。

希望这就是你要找的。p>

【讨论】：