[简单]js获取tr内td数量及值

最新推荐文章于 2023-06-28 17:06:38 发布
最新推荐文章于 2023-06-28 17:06:38 发布
阅读量4k 收藏 4
点赞数
分类专栏： js 文章标签： javascript c# ViewUI

        如题，代码如下：

       

<!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 οnclick="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 οnclick="getTdNum(this)">
				<td>2</td>
				<td>测试&lta&gt</td>
				<td>&nbsp;1</td>
			</tr>
		</table>
	</div>
</body>
</html>

    结果如下：

   

     全文完。

oy538730875
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取tr下的td
syousetu的博客
08-27 905
https://zhidao.baidu.com/question/745265010318712452.html
js获取复选框的tr中的值，并且算出合计
娜年夏天
07-11 1677
1：首先考虑复选框存在两种情况：一个是全选，全不选；另一个是单个选中与取消事件。 2：看实例. 年份 期数 值 ${o.ord_year!} ${o.iss!} ${o.value!} 合计 ${hj1.ord_year! ${hj1.iss!} 需要算出来的值 3：js代码 核心方法： f
js获取选中tr下td值
jad's blog
09-24 2411
function getParentEl (el, tagName) {     if (!el) return el;       do {         el = el.parentNode;     } while(el &amp;&amp; el.tagName !== tagName);           return el; }   ...
js获取td的值
透明大脑
06-29 1万+
new document       这里是td的值    function getTdDirectly(){ var tdobj = document.getElementById('mytd'); alert(tdobj.innerText); } function getTdIndirectly(
js 如何获取<td>标签的值
qq_38071008的博客
09-09 8377
$("td")是获取的所有td标签 通过循环遍历 也可以通过下标获取 $("td").eq(0).text();这是获取下标为0的值也就是第一个td $("td").each(function(){ var val = $(this).text();//获取td标签里面的内容 如果获取不到改成 .html() }); 如果只想获取某一个td的值那就在那个td上加个id var val = $("#...
javascript从tr中分别获得每个td的元素
朝闻道,夕死可矣!
04-09 1771
tr中分别获得每个td的元素 window.onload = function() { //第一种方法 var row = document.getElementById("row1"); // 找到这个tr下的所有td，不能用childNodes 属性，部分浏览器不兼容 var cells = row.getElementsByTagName("td")
JS获取table表格下的td值，以及td下的input值
Q927920568的博客
04-15 6003
遍历table表中的td值以及td标签中input的值 先创建table表格 <table > <tr> <td>td1</td> <td><input type="text" value="111"/></td> </tr> <tr> <td>t...
JavaScript获取tr td 的三种方式全面总结（推荐）
01-19
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...
js中获取 table节点各tr及td的内容简单实例
12-29
<tr> <td height=25>第一行</td> </tr> <tr> <td height=25>第二行</td> </tr> <tr> <td height=25>第三行</td> </tr> <tr> <td height=25>第四行</td> </tr> <tr> <td
JS动态添加Table的TR，TD实现方法
10-24
主要介绍了JS动态添加Table的TR，TD实现方法,涉及js针对Table中TR、TD节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js使用for循环与innerHTML获取选中tr下td值
12-11
function getParentEl (el, tagName) { if (!el) return el; do { el = el[removed]; } while(el && el.tagName !== tagName); return el;...var temp=document.getElementsByName('id');...var tr = g
js中value^= 是什么意思
qq_27246521的博客
01-15 4719
1、它是js选择器匹配模式的一种 2、eg: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 3、可以联想到正则表达式，也有^开头，$结尾，^就是以什么开头的意思，$以...
js获取td的内容
热门推荐
冯索的专栏
10-12 2万+
如果table内只有一个标签，则如下方法：    内容一 function showId(){ var obj = document.getElementById("td1"); alert(obj.innerText); } 如果table内有多个标签，则用如下方法：               内容一               内容二内容三
js 获取 table 中的每一个td
nightknight111的博客
10-21 586
var table = document.getElementById(“tableId”); for(var i=0,i<table.rows[0].cells.length){ alert(table.rows[0].cells[i].offSetWidth) }
用JS在点击时获取table里多组tr中某个td的内容
weixin_40758850的博客
03-17 2323
获取tr中某个td的内容 把要被获取的td设置相同的className，然后通过className获取td，再循环遍历td并获取它的内容，并将之暂存到一个新数组中。 以下时我的例子： 做一个私信界面， 点击某个私信小图标跳出一个界面，把对应的td的内容（名字）输出显示在这个界面： //获取所有图标 var privateImgs=document.getElementsByClassName(&quot;p...
js中获取 table节点各tr及td的内容方法
m0_37346206的博客
10-22 5906
<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td> </.
js 获取 table所有tr标签下第一个td的值
lwdfzr的博客
06-28 775
<table class="gridtable"> <thead> <tr> <th style="width: 20px;"> <input type="checkbox" name="allCheck" onclick="checkAll('allCheck', 'itemCheck')"> </th> <th >店铺&lt
javascript如何从tr中分别获得每个td的元素
weixin_33843409的博客
03-13 316
&lt;html&gt; &lt;body&gt; &lt;table border="1" id="table1"&gt; &lt;tr id="row1"&gt; &lt;td&gt;01&lt;/td&gt; &lt;td&gt;02&lt;/td&am
js 获取tr td
最新发布
10-05
在JavaScript中，可以使用DOM操作来获取tr和td元素。 要获取tr元素，可以使用以下方法之一： 1. 使用getElementById方法，传入tr元素的id属性值，如：document.getElementById('trId')，其中'trId'是tr元素的id。 2. 使用getElementsByTagName方法，传入'tr'作为参数，如：document.getElementsByTagName('tr')，该方法会返回文档中所有tr元素的集合。 要获取td元素，首先需要获取tr元素，接着可以使用以下方法之一： 1. 使用getElementById方法，传入td元素的id属性值，如：document.getElementById('tdId')，其中'tdId'是td元素的id。 2. 使用getElementsByTagName方法，传入'td'作为参数，如：trElement.getElementsByTagName('td')，其中trElement是获取到的tr元素对象。 举例来说，如果HTML中有以下结构： ``` <table> <tr id="trId"> <td id="tdId1">第一个单元格</td> <td id="tdId2">第二个单元格</td> </tr> </table> ``` 可以使用以下代码来获取tr和td元素： ```javascript // 获取tr元素 var trElement = document.getElementById('trId'); // 获取td元素 var tdElements = trElement.getElementsByTagName('td'); // 打印td元素的内容 for (var i = 0; i < tdElements.length; i++) { console.log(tdElements[i].innerHTML); } ``` 以上代码会依次输出"第一个单元格"和"第二个单元格"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值