如何在javascript函数中获取表的所有td值_Javascript_Jquery_Html_Css_Datatables 1.10

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

javascript jquery html css

如何在javascript函数中获取表的所有td值,javascript,jquery,html,css,datatables-1.10,Javascript,Jquery,Html,Css,Datatables 1.10,我有一个datatable，其中显示了子行展开折叠功能。它工作正常，但我想获取表的最后一个td的内容。现在我创建了一个函数，它将一些硬编码的值放置在datatable展开的位置。在那个地方，我想得到那些td值这是我发布的代码 <html> <head> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="https://cdn.data

我有一个datatable，其中显示了子行展开折叠功能。它工作正常，但我想获取表的最后一个td的内容。现在我创建了一个函数，它将一些硬编码的值放置在datatable展开的位置。在那个地方，我想得到那些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.1电子控制{
背景：url（'http://www.datatables.net/examples/resources/details_open.png“）无重复中心；
光标：指针；
}
tr.所示td.详细信息-控制{
背景：url（'http://www.datatables.net/examples/resources/details_close.png“）无重复中心；
}
/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
var v；
$（“#示例tbody tr”）。每个（函数（）{
//在tr中，我们找到最后一个td子元素并获取内容
v=$（this.find（“td:last child”）.html（）；
返回v；
});
//在tr中，我们找到最后一个td子元素并获取内容
//警报（$（this.find（“td:last child”）.html（））；
返回“”+
''+ 
“+v+”
''
' ' 
}
$（文档）.ready（函数（）{
变量表=$（“#示例”）.DataTable（）；
//为打开和关闭详细信息添加事件侦听器
$（#示例tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
控制台日志（行）；
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
} );
//结束添加事件
$（“#divPopUp”）。对话框({
可调整大小：正确，
自动打开：错误，
宽度：550，
莫代尔：是的，
按钮：{
“保存”：函数（）{
var text=$（this）.find（“：checkbox:checked”）.map（函数（）{
返回此值。值为+“”；
}).get（）.join（）；
var obj=$（this.data（“开瓶器”）；
$（obj）.parents（'td:first'）。同胞（':eq（2））.find（':text'）.val（text）；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
关闭：函数（）{
$（this.find（“：checkbox”）.removeAttr（'checked'）；
$（此）.dialog（“关闭”）；
}
});
$（'button.btn'）。在（'click'，function（）上{
var title=$（this）.parents（'td:first'）。同胞（':eq（0'））.text（）；
console.log（“标题为：”+标题）；
$（“#divPopUp”）.data（'opener'，this.）。对话框（“选项”，“标题”，标题）。对话框（“打开”）；
var text=$（this）.parents（'td:first'）。同胞（':eq（2）'）。find（':input'）.val（）；
如果（$.trim（文本）！=“”）{
var text=text.split（“，”）；
$.each（text，function（i，value）{$（“#divPopUp”）.find（':checkbox[value=“'+$.trim（value）+']'））.prop（'checked'，true）；
});
}
});
} );
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000

在这个format函数中，我想得到datatables的所有td值。有人请帮忙，我在jQuery中做了这件事，因为你有每行的最后一个td，因为没有任何内容，我删除了它们，以显示它可以使用salary列工作

这将获取每行最后一个

td

的值，在函数中，您可以对这些值执行任何操作

//为每个tbody tr运行函数
$（“#示例tbody tr”）。每个（函数（）{
//在tr中，我们找到最后一个td子元素并获取内容
警报（$（this.find（“td:last child”）.html（））；
});

名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
我尝试使用jquery
代码：
试试这段代码，希望这段代码适合你
 获取匹配元素的集合：所有行中的最后一个：
var last_col = $("#example tbody tr td:last-child");

现在，您可以以数字数组（或）的形式获取值：
额外好处：如果您希望对数组中的每个值进行求和（或运算）（从左到右），可以使用
您可以在此处运行此代码：
假设您需要一行的完整数据
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>';

“last td”是指最后一列还是最后一个单元格？我猜每行的最后一个单元格是对的？是的……我希望每一个最后一个tdI在绿色plus的每个展开中只得到最后一个子值，我希望返回此函数格式（d）{/d
是行的原始数据对象，返回“Agencies”+'+'+'Agencies必须来自tds'''''@lucifer您刚才所说的没有任何意义。在注释中发布代码也没有帮助。将所有相关代码发布到您的问题中。您的代码有帮助但是我仍然无法实现我的功能。我想在加号的每个扩展中获得最后一列值。我正在发回我的问题。你能看到我的日期吗post@lucifer因为你已经有了代码，所以我只是对它做了一点修改。你已经得到了行。数据使用它你可以很容易地得到你想要的值那是什么
var values = $.map(last_col.get(), function (td) {
    return +$(td).text().replace(/[\$\,\s]/g, "") || 0;
});

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

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);
      });