如何在JavaScript函数中获取Table的所有td值 [英] How to get all the td values of a Table in a javascript function

查看：123
本文介绍了如何在JavaScript函数中获取Table的所有td值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个数据表，其中我显示子行扩展崩溃功能。它运行良好，但我想获取表的最后一个TD的内容。现在我已经创建了一个函数，这是放置一些硬编码值在数据表扩展的地方。在那个地方，我想获得这些td值。 ！





以下是我发布的代码 

 < html> 
< head> 
< title>在此插入标题< / title> 
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css> 
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css> 
 
 
< script type =text / javascriptlanguage =javascriptsrc =https://code.jquery.com/jquery-1.11.1.min.js >< /脚本> 
< script type =text / javascriptlanguage =javascriptsrc =https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js>< /脚本> 
< script type =text / javascriptlanguage =javascriptsrc =https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.min.js> < /脚本> 
 
< / head> 
< body> 
 
< style type =text / css> 
 td.details-control {
 background：url（'http://www.datatables.net/examples/resources/details_open.png'）no-repeat center center; 
光标：指针; 
} 
 tr.shown td.details-control {
 background：url（'http://www.datatables.net/examples/resources/details_close.png'）no-repeat center中央; 
} 
< / style> 
< script type =text / javascriptclass =init> 
 / *行格式的格式化函数 - 根据需要修改* / 
函数格式（d）{
 
 var v; 
 $ b $（＃example tbody tr）。each（function（）{
 
 //在tr中，我们找到最后一个td子元素并获取内容
v = $（this）.find（td：last-child）。html（）; 
 return v; 
}）; 
 
 //在tr中，我们找到最后一个td子元素并获得内容
 // alert（$（this）.find（td：last-child）。html（）） ; 
 
 
 return'< fieldset> <图例> < /图例> < table cellpadding =5cellspacing =0border =0style =padding-left：50px;>'+ 
'< tr>'+ 
'< td>'+ v +'< / td>'
'< / tr>'
 
'< / table> < / fieldset>'
 
 
} 
 $（document）.ready（function（）{
 var table = $（'＃example'）。DataTable （）; 
 //添加用于打开和关闭细节的事件侦听器
 $（'＃example tbody'）.on（'click'，'td.details-control'，function（）{
 $ var tr = $（this）.closest（'tr'）; 
 var row = table.row（tr）; 
 
 if（row.child.isShown（））{ 
 //此行已经打开 - 关闭它
 row.child.hide（）; 
 tr.removeClass（'shown'）; 
} 
 else { 
 //打开此行
 console.log（row）; 
 row.child（format（row.data（）））.show（）; 
 tr.addClass（ '显示'）; 
} 
}）; 
 //结束添加事件
 
 $（＃divPopUp）。dialog（{
 resizable ：true，
 autoOpen：false，
 width：550，
 modal：true，
按钮：{
保存：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）; 
}，
取消：function（）{
 $（this）.dialog（close）; 
 $ b $，
 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 =exampleclass =displaycellspacing =0width =100％> 
< thead> 
< tr> 
< th>< / th> 
< th>名称< / th> 
< th>位置< / th> 
< th> Office< / th> 
< th>年龄< / th> 
< th>开始日期< / th> 
工资< / th> 
 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td class =details-control>< / td> 
< td>泰克尼克森< / td> 
< td>系统架构师< / td> 
< td>爱丁堡< / td> 
< td> 61< / td> 
< td> 2011/04/25< / td> 
< td> $ 320,800< / td> 
 
 
< / td> 
< / tr> 
< tr> 
< td class =details-control>< / td> 
< td>加勒特温特斯< / td> 
< td>会计师< / td> 
< td>东京< / 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>旧金山< / td> 
< td> 66< / td> 
< td> 2009/01/12< / td> 
< td> $ 86,000< / td> 
< / td> 
< / tr> 
< / tbody> 
< / table>

里面那个格式函数我想获得所有td值的数据表。有人请帮忙

解决方案

我在jQuery中做过，因为每行的最后一个 td 为没有任何我删除他们显示它使用工资栏的作品。



这会得到每行最后一个值 td ，在函数中你可以做任何你想要的值。 



  //为每个tbody运行函数tr $（＃example tbody tr）。each（function（）{//在tr （$（this）.find（td：last-child）。html（））;}）;

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>< table id =exampleclass =displaycellspacing =0width =100％> < THEAD> < TR> <的第i;< /第> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;年龄< /第> < th>开始日期< / th> <的第i;薪酬和LT; /第> < / TR> < / THEAD> < TBODY> < TR> < td class =details-control>< / td> < td> Tiger Nixon< / td> < td>系统架构师< / td> < TD>爱丁堡< / TD> < TD> 61℃; / TD> < TD> 2011/04/25℃; / TD> < TD> $三二〇八〇〇< / TD> < / TR> < TR> < td class =details-control>< / td> < td> Garrett Winters< / td> < TD>会计< / TD> < TD>东京< / TD> < TD> 63< / TD> < TD> 2011/07/25℃; / TD> < TD> $十七万〇七百五十< / TD> < / TR> < TR> < td class =details-control>< / td> < td> Ashton Cox< / td> < td> Junior Technical Author< / td> < td>旧金山< / td> < TD> 66< / TD> < TD> 2009/01/12 LT; / TD> < TD> $ 86,000< / TD> < / TR> < / tbody>< / table>


I have a datatable in which i am showing child rows expand collapse functionality.It is working well but i want to get the contents of last td of a table.For now i have create a function which is placing some hard coded value in the datatable expanded place . In that place i want to get those td values. !

Here is the code i am posting 

<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>

Inside that format function i want to get all td values of datatables.Somebody please help

解决方案

I did it in jQuery, as you have your last td of each row as nothing I deleted them to show it works using the salary column.

This gets the value of each row's last td, in the function you can do whatever you want to the values. 

// 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>

这篇关于如何在JavaScript函数中获取Table的所有td值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆