选中行时从表中的特定列获取数据

时间:2018-11-20 11:19:32

标签: javascript jquery

我需要从一行中的特定表列获取信息。所有数据都应放入一个数组中。 我应该从不同的列(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)'我会得到一个空数组

3 个答案:

答案 0 :(得分: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]中,您可以在数组中查看所选行值的列表。

希望这就是您想要的。

答案 1 :(得分: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>

答案 2 :(得分:0)

这里是单击按钮时如何获得所有选定值的方法。只需遍历所有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>