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

2024-04-17

我有一个数据表,其中显示子行展开折叠功能。它运行良好,但我想获取表的最后一个 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 值。请有人帮忙


我是用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在javascript函数中获取Table的所有td值 的相关文章

随机推荐

  • 为 Windbg 获取正确的 .net 本机符号

    我正在做一些故障转储调试 我正在查找从生产服务器获取的转储 我运行 WinDbg 的机器必须安装有稍微不同版本的 NET 运行时 我在加载 NET 系统程序集的本机映像时遇到错误 因此无法加载 System Data Linq 确保我的调试
  • Django/python 如何从对象列表中获取 id 列表

    如果我有一个通过某些查询获取的对象列表 在本例中为 Django 模型 friends Friend objects friends user1 如何获取 id 列表 以便我可以使用它来搜索另一个模型 如下所示 items Item obj
  • 为 ActionMailer 渲染不同的视图(模板)

    我正在尝试对 ActionMailer Rails 3 1 1 中的不同模板进行条件渲染 我希望大多数用户都能正常使用welcome html erb模板 但有些用户得到特殊welcome photographer html erb模板 这
  • 如何在 mongodb 中取消设置后删除值为 null 的数组字段

    我在 mongo 中取消设置了一个数组字段 但该字段的值为 null 问题是 如何去除 喜欢这张图片https i stack imgur com O2WiV png https i stack imgur com O2WiV png 你可
  • Scikit-learn Ridge 分类器:提取类概率

    我目前正在使用 sklearn 的 Ridge 分类器 并且希望将此分类器与 sklearn 和其他库中的分类器集成 为了做到这一点 理想的做法是提取给定输入属于类列表中每个类的概率 目前 我正在使用 model decision func
  • 如何在 `git rm abc.c` 之后恢复文件?

    我应该删除另一个文件git rm abc c 但我删错了 我怎样才能恢复它 现在 当我发出git status 它说 deleted abc c 顺便说一句 我现在还有其他未提交的更改 您需要执行两个命令 第一个命令将 取消暂存 文件 将其
  • 无法使用 mono 命令提示符为 gtk# 编译 hello.cs

    本来希望this https stackoverflow com questions 8835352 cannot compile gtk example会有所帮助 但会出现不同的错误 尝试将以下内容编译为 hello cs using G
  • 将 CloudTrail 日志导入 Logstash

    我正在尝试将日志从 CloudTrail 获取到 ElasticSearch 中 以便我们可以更好地了解 AWS 账户中发生的情况 我已经在我的机器 Ubuntu 14 04 上设置了 Logstash 和 ElasticSearch 并且
  • 在 Django 中,如何查找属于字符串一部分而不是包含该字符串的术语?

    例如 我的表中两个字段下有三行 如下所示 id name 1 brown cat 2 black dog 3 person 这里出现了一个字符串 或者一个句子 A brown cat jumps over a person 我如何使用这个字
  • 如何让 python setuptools 找到顶级模块

    我有一个包 其结构 简化 如下所示 mypackage init py setup py module1 py module2 py mysubpackage init py mysubmodule1 py mysubmodule2 py
  • 如何在 Jenkins 管道中的 zip 文件管道实用程序插件中排除 Jenkinsfile 和自动化脚本

    我在詹金斯的工作区结构如下图所示 automation scripts dist assets datasim images icons node modules src config pm2 json package json 在上面的目
  • 这段用于确定圆和线段是否相交的代码正确吗?

    显然很难找到一条线是否存在的答案segment和圆相交 例如 如果你用谷歌搜索 你会发现这个问题 https stackoverflow com questions 1073336 circle line segment collision
  • boost:asio IPv4 地址和 UDP 通信

    问题已解决 请参阅底部的解决方案说明 我正在尝试构建一个简单的应用程序来测试支持以太网的微控制器 我想做的就是发送和接收小 UDP 数据包 该代码使用 boost asio 进行网络连接 并且非常简单 为了调试 我将所有初始化移出构造函数
  • 在测试环境 (Mac OS X) 中模拟较差的带宽?

    我们有一个定制的 Flash HTML5 视频播放器供我们网站上的用户使用 我目前正在为带宽 次优 的用户充实体验 基本上我们希望客户端代码能够检测到由于过度缓冲而导致的不良用户体验 我想在我的本地开发环境中测试这个 带宽不足 处理代码 有
  • 有没有办法在不同平台上测试phonegap构建应用程序

    所以我使用Android开发sdk开发了一个phonegap应用程序 我使用 Phonegap build 为 Simbian WebOS Windows iOS 和 Blackberry 构建我的项目 但我没有用于这些平台的设备来测试我的
  • 更改 MySQL 表以添加外键约束会导致错误

    问题 为什么在尝试更改具有外键约束的表时会出现错误 Details 我有1张桌子 HSTORY我将其用作所有其他特定历史表 即USER HISTORY BROWSER HISTORY PICTURE HISTORY 我还包括了PICTURE
  • 是否可以使用 __rmod__ 覆盖 str 的 % 行为?

    我想做 x doSomething y 对于任何 x 和任何 y 来说 这都很容易做到 参见下面的代码 但 x 是 str 的情况除外 有没有什么方法 例如添加特殊方法或引发特定错误 导致旧式字符串格式化失败 类似于 1 doSomthin
  • 实体框架多重聚合性能

    我有一个关于实体框架查询构建的问题 Schema 我有一个这样的表结构 CREATE TABLE dbo DataLogger ID bigint IDENTITY 1 1 NOT NULL ProjectID bigint NULL CO
  • 使用 Ransack 搜索值数组

    我是 Ransack 的新手 我遇到了 Ransack 未明确涵盖的案例 我基本上试图搜索一个值 但搜索到的值包含在一个数组中 CODE 最后还有这一段user rep code list cont这是用户的默认数组属性 目前看起来像这样
  • 如何在javascript函数中获取Table的所有td值

    我有一个数据表 其中显示子行展开折叠功能 它运行良好 但我想获取表的最后一个 td 的内容 现在我创建了一个函数 该函数在数据表中放置一些硬编码值扩大的地方 在那个地方我想得到那些 td 值 这是我发布的代码