堆栈内存溢出
  繁体   English   中英

如何在JavaScript函数中获取表的所有td值

[英]How to get all the td values of a Table in a javascript function

 原文  2015-03-10 08:50:34  4   4    javascript/ jquery/ html/ css/ datatables-1.10

问题描述

我有一个数据表，其中我正在显示子行展开折叠功能。它工作正常，但我想获取表的最后td的内容。现在我创建了一个函数，该函数将一些硬编码值放置在数据表中扩大的地方。 在那个地方，我想获得那些td值。 ！

在此处输入图片说明

这是我发布的代码 

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">


<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.min.js"></script>

</head>
<body>

<style type="text/css">
td.details-control {
background:     url('http://www.datatables.net/examples/resources/details_open.png') no-repeat     center center;
 cursor: pointer;
  }
tr.shown td.details-control {
background:   url('http://www.datatables.net/examples/resources/details_close.png') no-repeat    center center;
 }
</style>
<script type="text/javascript" class="init">
  /* Formatting function for row details - modify as you need */
   function format ( d ) {

    var v;

        $("#example tbody tr").each(function() {

        // Within tr we find the last td child element and get content
        v = $(this).find("td:last-child").html();
        return v;
        });

    // Within tr we find the last td child element and get content
    //alert($(this).find("td:last-child").html());


    return '<fieldset> <legend>     </legend>   <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+ 
    '<td>'+v+'</td>'
   '</tr>'

    '</table> </fieldset>' 


  }
  $(document).ready(function() {
    var table = $('#example').DataTable();
   // Add event listener for opening and closing details
    $('#example tbody ').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
}
else {
    // Open this row
    console.log(row);
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
   }
  } );
  // End add event 

 $("#divPopUp").dialog({
    resizable: true,
   autoOpen: false,
   width: 550,
   modal: true,
   buttons: {
    "Save": function() {
        var text = $(this).find( ":checkbox:checked" ).map(function() {
            return this.value+' ';
        }).get().join();

        var obj = $(this).data("opener");
        $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
        $( this ).dialog( "close" );
    },
    Cancel: function() {
        $( this ).dialog( "close" );
    }
},
close:function(){
    $(this).find( ":checkbox" ).removeAttr('checked');
    $( this ).dialog( "close" );
}
});

$('button.btn').on('click', function(){
var title = $(this).parents('td:first').siblings(':eq(0)').text();
console.log("title is : "  + title);
$( "#divPopUp" ).data('opener', this).dialog( "option", "title", title    ).dialog( "open" );
      var text =          $(this).parents('td:first').siblings(':eq(2)').find(':input').val();
if($.trim(text) != ''){
      var texts = text.split(" ,"); 
    $.each(texts, function(i, value){    $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
       });
     }
   });
 } );
   </script>
   <body>
     <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
           <tr>
              <th></th>
             <th>Name</th>
            <th>Position</th>
            <th>Office</th>
           <th>Age</th>
           <th>Start date</th>
          <th>Salary</th>

    </tr>
</thead>
<tbody>
    <tr>
       <td class="details-control" ></td>       
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>


    </td>
    </tr>
    <tr>
         <td class="details-control" ></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>


    </td>
    </tr>
    <tr>
         <td class="details-control" ></td>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>    
    </td>
    </tr>
  </tbody>
  </table>

在该格式函数内，我想获取数据表的所有td值。

4 个解决方案

解决方案1
 3 已采纳  2015-03-10 09:07:04

我在jQuery中完成了此操作，因为您有每一行的最后一个td ，因为我什么也没删除它们来显示它使用薪水列的工作方式。

这将获取每行最后一个td的值，您可以在函数中对值进行任何操作。 

 // Run function for each tbody tr $("#example tbody tr").each(function() { // Within tr we find the last td child element and get content alert($(this).find("td:last-child").html()); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td class="details-control"></td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td class="details-control"></td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td class="details-control"></td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> </tbody> </table>

解决方案2
 0  2015-03-10 09:22:49

我尝试使用jQuery。

码： 

$('#example tr td:last-child').each(function () {
    console.log($(this).html());
});

尝试使用此代码，希望此代码对您有用。

解决方案3
 0  2015-03-11 19:40:22

获取匹配的元素的集合：所有行中的最后一个<td>： 

var last_col = $("#example tbody tr td:last-child");

现在，您可以将<td>值获取为数字数组（ jQuery.map（）或Array.prototype.map（） ）： 

var values = $.map(last_col.get(), function (td) {
    return +$(td).text().replace(/[\$\,\s]/g, "") || 0;
});

奖励：如果要对数组中的每个值进行求和（或运算）（从左到右），则可以使用Array.prototype.reduce（） 

var total = values.reduce(function (prev, current) { 
    return prev + current;
}, 0 /*starts prev*/);

您可以在此处运行此代码： https : //jsfiddle.net/4kw6yco7/

解决方案4
 0  2015-03-17 10:04:06

假设您要连续获取整个数据 

var row = '<tr>' + '<td id="tduid">' + value['uid'] + '</td>' + '<td>' + value['name'] + '</td>' + '<td>' + value['address'] + '</td>' + '<td>' + tags + '</td>' + '<td>' + '<button class="deleteUser btn btn-danger" type="submit" id="del">Edit</button>' + '</td></tr>';

您需要此行的值。 所以接下来 

$('#del').click(function(e) {                                                       
     var tuid = $(this).closest('tr').find('#tduid').text();
                alert(tuid);
      });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何获取HTML <td> 表格中使用javascript的值 使用 javascript jquery 3.5.1 获取所有表元素的值，包括 td、textarea 或 innerHtml 值 首先获取所有值<td>在一张桌子上<tr>除了第一个使用 Javascript 如何动态获取表“ Td”值 如何获得HTML <td> 使用javascript的值？ 如何使用javascript获取表的td值 从选中了复选框的表中获取td列的所有值 使用Javascript读取所有td值 使用DataTable插件获取具有特定类的表的所有td值 如何使用javascript从许多表中获取所有td单元格的内容值？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM