使用 Javascript/jquery 如何从选定行中的每个单元格获取值

Posted 2023-05-08

【中文标题】使用 Javascript/jquery 如何从选定行中的每个单元格获取值

【英文标题】：Using Javascript/jquery how can I get values from each cells in a selected row

【发布时间】：2013-09-18 14:12:53

【问题描述】：

我正在尝试弄清楚如何获取一行中的每个单元格值并将其分配给一个变量。尤其是复选框值

这是一个表格的例子

<table id="mytable" class="table">
    <thead>
        <b><tr><th>Header1</th><th>Header2</th><th>Header2</th><th>Header3</th></tr></b>
    </thead>
    <tr>
        <td>value1</td>
        <td>value1</td>
        <td>
            <label><input id="divpriority" ng-model="priority" type="checkbox" /> Option1</label>

            <label><input id="divsource" type="checkbox" /> Option2</label>

            <label>  <input type="checkbox" checked/>Otion3</label>
        </td>                   
        <td><br/><br/><button id="buttonvalues" type="button" class="btn-primary">GetValues</button></td>
    </tr>
</table>

因此，当在当前行中单击“GetValues”按钮时，每个单元格中的值都会分配给一个变量。

我在想类似这样的事情：（我知道这可能是不正确的）

  $("#mytable table tbody ").on("click", "#buttonvalues", function() 
     var header1;
     var header2;
     var Options = new Array()

   var header1 = $(this).closest('tr').header1.val ;
   var header2 = $(this).closest('tr').header2.val

  Options = //Not sure what to do here

，并通过单击行中包含的按钮将值分配给变量。

请强调将复选框中的标签名称分配给数组变量。我想获取检查到数组中的复选框的名称

【问题讨论】：

但是复选框没有name属性，你的意思是标签的文字内容吗？ ID 也必须是唯一的。

没错。标签文本\

快速评论：您的 html 缺少 tbody

@thtsigma 这是几乎所有浏览器都会为您添加的元素。如果您在 HTML 中省略 <tbody />，它仍会显示在 DOM 中。这有点像您不必使用关闭 </li> 标记。

有趣！谢谢@Jasper，我不知道。

【参考方案1】：

如果你想保存行中的每个单元格值，这样的方法会起作用。

Demo Fiddle

代码：

$("#mytable").on("click", ".btn-primary", function () 
    var values = [];
    var $header = $(this).closest('table').find('thead th');
    var $cols   = $(this).closest('tr').find('td');

    $header.each(function(idx,hdr) 
        var $curCol = $cols.eq(idx);
        var $labels = $curCol.find('label');
        var value;

        if($labels.length) 
            value = ;
            $labels.each(function(lblIdx, lbl) 
                value[$(lbl).text().trim()] = $(lbl).find('input').is(':checked');
            );
         else 
            value = $curCol.text().trim();
        
        values.push(  name: $(hdr).text(), value: value  );
    );

    console.log(JSON.stringify(values, null, 2));
);

结果：

[
  
    "name": "Header1",
    "value": "value1"
  ,
  
    "name": "Header2",
    "value": "value1"
  ,
  
    "name": "Header3",
    "value": 
      "Option1": false,
      "Option2": false,
      "Option3": true
    
  ,
  
    "name": "Header4",
    "value": "GetValues"
  
] 

要获取数组中每个选中选项的名称，请将标头循环更改为：

$header.each(function(idx,hdr) 
    var $curCol = $cols.eq(idx);
    var $labels = $curCol.find('label');
    var value;

    if($labels.length) 
        // Filters for labels containing a checked checkbox
        value = $labels.filter(function(lblIdx) 
            return $(this).find('input').is(':checked');
        ).map(function(valIdx, valLbl)   // Maps the result to the text value of the label
            return $(valLbl).text().trim();
        ).get();  // returns just the array of values
     else 
        value = $curCol.text().trim();
    
    values.push(  name: $(hdr).text(), value: value  );
);

输出Demo Fiddle：

[
  
    "name": "Header1",
    "value": "value1"
  ,
  
    "name": "Header2",
    "value": "value1"
  ,
  
    "name": "Header3",
    "value": [
      "Option1",
      "Option3"
    ]
  ,
  
    "name": "Header4",
    "value": "GetValues"
  
] 

【讨论】：

这很棒。我不想从选项中获取 true 或 false，而是将标签的名称作为 array 获取。喜欢值”: "Option1", "Option2", "Option3"

@Milligran 我添加了一个基于检查内容返回标签值数组的示例。

【参考方案2】：

我认为您希望在单击该行时获取该行的值。如果是这种情况，那么您的选择器可能是：$("#mytable").on("click", ".btn-primary", ...。并获取复选框的值：var priority = $(this).closest('tr').find("input").eq(0).val();

我建议在每一行的复选框上放置类，以便您可以按该类进行选择，而不是依赖于始终与使用 .eq(0) 相同的 HTML 结构。您当前使用的 ID 并不是特别有效，因为它们在 DOM 中应该是唯一的。

【参考方案3】：

ID 必须是唯一的，您应该改用类，假设您已将 ID 更改为可以使用返回数组的 .map() 方法的类：

$("#mytable").on("click", ".buttonvalues", function() 
     var options = $(this).closest('tr')
                          .find('input[type=checkbox]:checked')
                          .map(function() 
                              return $.trim( $(this).parent().text() );
                          ).get();
);

请注意$("#mytable table") 不会选择具有mytable ID 属性的表。它选择#mytable 元素的后代表。

【参考方案4】：

试试这个：http://jsbin.com/oREJEKo/1/edit

$('#mytable').on('click', 'button', function() 
  var checkboxes = $($(this)).closest('tr').find('input[type="checkbox"]');
  var myvalues = [];
  $(checkboxes).each(function() 
    if ( $(this).is(':checked') ) 
       myvalues.push( $(this).closest('label').text() );  
    
  );

  console.log(myvalues);
);