如题，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js获取tr内td数量及值</title>
<style>
* {
font-family: 'MICROSOFT YAHEI';
margin: 0;
padding: 0;
}
#testDiv {
width: 800px;
margin: 3px auto;
padding: 15px 10px;
text-align: center;
border: 1px solid #bdf3d4;
text-align: center;
}
#testDiv table {
width: 100%;
}
</style>
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script>
$(function() {
$('#testDiv table tr').on('click', function() {
var self = $(this);
console.log('jquery获取tr中td数量' + self.children('td').length);
console.log('jquery获取td值为:');
self.each(function() {
console.log($(this).text());
});
/* var varclone=self.clone(true);
$('#testDiv table').append(varclone); */
});
//console.log('表格 第2行第3列值='+$('#testDiv table tr:eq(1) td:eq(2)').text());
});
function getTdNum(obj) {
var varTr = obj.getElementsByTagName('td');
console.log('js获取 tr中td数量:' + varTr.length);
console.log('js获取td值为:');
for (var i = 0; i < varTr.length; i++) {
console.log(varTr[i].innerHTML);
}
}
</script>
</head>
<body>
<div id="testDiv">
<table cellpadding="0" cellspacing="0" border="0">
<tr onclick="getTdNum(this)">
<td>1</td>
<td>测试</td>
<td>测试</td>
<td>2014-07-30</td>
<td>2014-07-31</td>
<td>500</td>
<td>600</td>
<td>测试</td>
</tr>
<tr onclick="getTdNum(this)">
<td>2</td>
<td>测试<a></td>
<td> 1</td>
</tr>
</table>
</div>
</body>
</html>
结果如下：
全文完。
相关推荐
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...
在JavaScript中获取table节点各tr（表格行）及td（表格单元格）的内容是一个常见的操作，这在进行网页动态内容更新或数据提取时非常有用。本文将通过实例来说明如何通过JavaScript代码实现这一功能。 首先，我们...
本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及涉及到的相关知识点。 首先，让我们了解HTML的table结构。一个基本的HTML表格由`<table>`标签开始，内部包含`<tr>...
本文将详细探讨如何利用正则表达式来提取`<tr>`和`<td>`标签内的数据。 **正则表达式基础** 正则表达式是一种模式匹配工具，用于在文本中查找、替换或提取特定的字符串模式。在HTML中，`<tr>`标签定义了一行，`<td>...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
`tr`（table row）元素定义表格中的行，而 `td`（table data cell）元素则定义表格内的单元格，其中包含了实际的数据。 在 WebDriver 中，我们可以使用 Selenium 的 API 来操作这些元素。以下是一些关键的步骤和...
js操作ＨＴＭＬ增加删除ＴＲ／ＴＤ （学前班级别的哈！）
在JavaScript编程中，动态添加`td`（表格数据单元格）和`tr`（表格行）是常见的需求，尤其在创建交互式网页时。本文将深入探讨如何利用JavaScript实现这一功能，以及它在实际开发中的应用。 首先，我们需要了解HTML...
在这个场景下，我们需要掌握如何利用JavaScript有效地获取table中某个td的值，以便实现动态的页面交互。 首先，了解HTML表格的基本结构至关重要。一个表格由`<table>`元素定义，其中包含多个`<tr>`（行）元素，每个...
html中使用tr和td标签作出简单的静态表格，适用用于参考
我们的目标是找到所有的`<td>`元素并获取它们的文本内容。 在C#中，我们可以使用`System.Text.RegularExpressions`命名空间中的`Regex`类来处理正则表达式。下面是一个简单的示例，演示了如何从HTML字符串中提取`...
除了上述内容，标签中还提到“JS 动态 添加 Table TR TD 方法”，这表明文章着重讨论了使用原生JavaScript（不依赖于任何框架或库）来实现这一功能。在现代Web开发中，虽然诸如jQuery这样的库提供了更简便的方法来...
本文实例讲述了JS获取Table中td值的方法。分享给大家供大家参考。具体如下： 1、当要获取多行中的任意TD时，采用给每个TD设置一个共同的class 代码如下:<tr> <td xss=removed id=”td2″>002</td> <td xss=...
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...
一、JS动态添加`<tr>` 在HTML中，`<table>`元素用于创建表格，而`<tr>`元素代表表格的一行。在JavaScript中，我们可以通过DOM（Document Object Model）操作来动态地向表格中添加新的行。以下是一个基本的示例： ``...
在"用Jquery获取table中td的值"这个场景下，可能需要遍历整个表格获取所有`td`的值。可以使用`.each()`方法来实现： ```javascript $("table tr td").each(function(index, element) { var value = $(element)....
$tbody.append('<tr><td>' + key + '</td><td>' + value + '</td></tr>'); }); ``` 总结来说，虽然JavaScript直接获取计算机硬件信息的能力有限，但结合WebAssembly、Web Workers等技术以及jQuery的辅助，我们可以...
### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时，我们经常需要动态地从服务器获取数据，并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...