JS获取Table中td值的方法
作者：damaolly
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS获取Table中td值的方法,实例分析了javascript操作table中td的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了JS获取Table中td值的方法。分享给大家供大家参考。具体如下：
1、当要获取多行中的任意TD时，采用给每个TD设置一个共同的class
代码如下:&tr&&
&&& &td style="display: none" id="td2"&002&/td&&
&&& &td style="text-align:text-decoration:" id="td2" class="mouse_hover"&爱流量APP互联网推广&/td&&
&&& &td style="text-align:"&集团市场部&/td&&
&&& &td style="text-align:"&&/td&&
&&& &td style="text-align:"&&/td&&
&&& &td style="text-align:"&11&/td&&
&&& &td&&/td&&
在初始化方法：
$(document).ready(function() {
$(".mouse_hover").click(function() {
//$(this).context.innerHTML //同样效果
alert($(this).text());
//alert("222" + $(this).context.innerText);
2、固定TD取值，设置TD的id：
document.getElementById('td1').innerHTML
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具用js我想拿到td里的input内容【html吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：95,039贴子：
用js我想拿到td里的input内容收藏
&td&&input type="checkbox"&&/td&&input type="checkbox"&这个东西怎么拿 不用jquery
document.getElementById('控件id').
不用jQuery就是用js两者一样，只不过jQuery是一些高手封装起来的js。把td设置一个id再用一楼的方法就行了
操作！！js最基础的，也是最重要的部分，加油！！！
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或jquery 获取td内的input
&td&数量&input type=&text& name=&data_&& id='aa' class=&aaa&/&&/td&
&td&金额&div&id='bb'&&/div&&/td&
var $shuliang = $(this).parent().find('td').find(&#aa&).val();
var $jine = $(this).parent().find('td').find(&#bb&).val();
这样写多吗，取不到值啊
//如果你多个td下有input
$(&td input&).each(
function()
var value = $(this).val();
//如果只有一个的话
$(&#aa&).val();
？？？你$(&#aa&).val();
$(&#bb&).html()取不到吗？
&script type=&text/javascript& src=&/jquery-1.6.3.min.js&&&/script&
$(function(){
$(&.jisuan input&).blur(function(e) {
var $shuliang = $(this).parent().find(&#aa&).val();
if (isNaN($shuliang))
var $danjia = $(this).parent().find(&#bb&).val();
if (isNaN($danjia))
var $xiaoji =$(this).parent().find(&#xj&);
$xiaoji.text($shuliang*$danjia);
var sum=0;
$(&.aaa&).each(function(){
var $shuliang1 = $(this).parent().find(&#aa&).val();
var $danjia1 = $(this).parent().find(&#bb&).val();
sum+=$shuliang1*$danjia1;
$.each($(&.aaa&),function(n,item){
i+=parseInt($(item).val(),10);
if (isNaN(i))
$(&#sum1&).text(i);
$(&#sum&).text(sum);
.blur(function(){
$(this).val($(this).val().replace(/[^\d.]/gi,&&));
&table width=&100%& border=&1& class=&table_sum&&
&tr class=&jisuan&&&td&
数量&input type=&text& name=&data_&
id='aa' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb' /&&/td&
&td&小计&span id=&xj&&&/span&&/td&
&tr class=&jisuan&&
数量&input type=&text& name=&data_&
id='aa' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb'/&&/td&
&td&小计&span id=&xj& &&/span&&/td&
&span id=&sum1&&
金额总计&span id=&sum&&&/span&
没没加TD标签前正常，加了以后小计和合计都不显示了，js我很菜，改不了啊
--- 共有 2 条评论 ---
你不用each函数也可以，简单点的话就是每次算小计之前获得当前小计值，计算完之后从总计中减去原始小计再加上新的小计。没输入一行更新一次总计就可以了。你如果有兴趣的话可以去w3school学习一下js和jquery，你基础略差了。
parent()是取父组件，find是在该元素子组件中找到某个组件，你加了td之后父组件就变成td了找不到相邻的单价和小计之类的了。建议你不要加td，如果非要加td的话你js里面要用parent().parent()也就是选取祖父组件。我下面的回答应该能解决你的需求了
$(this)是什么？？
--- 共有 1 条评论 ---
所有代码我都贴出来了
因为你的有两个 id = &aa& ,id=&bb& 所以,你的页面元素已经重复了,建议你更改id 为不重复字段，这样才能用$(&#id&).val(); &id 为你的页面元素ID
这个是比较基础的问题 你可以做如下修改，我仅出示部分代码
&table width=&100%& border=&1& class=&table_sum&&
&tr class=&jisuan&&&td&
数量&input type=&text& name=&data_&
id='aa1' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb1' /&&/td&
&td&小计&span id=&xj&&&/span&&/td&
&tr class=&jisuan&&
数量&input type=&text& name=&data_&
id='aa2' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb2'/&&/td&
&td&小计&span id=&xj& &&/span&&/td&
&/tr& 你可以使用 &$(&aa1&).val();&
$(&aa2&).val(); &$(&bb1&).val();&$(&bb2&).val(); 或者可以使用我前一个回答中的循环,用this来取值,不要使用id了
引用来自“1泡泡1”的答案&script type=&text/javascript& src=&/jquery-1.6.3.min.js&&&/script&
$(function(){
$(&.jisuan input&).blur(function(e) {
var $shuliang = $(this).parent().find(&#aa&).val();
if (isNaN($shuliang))
var $danjia = $(this).parent().find(&#bb&).val();
if (isNaN($danjia))
var $xiaoji =$(this).parent().find(&#xj&);
$xiaoji.text($shuliang*$danjia);
var sum=0;
$(&.aaa&).each(function(){
var $shuliang1 = $(this).parent().find(&#aa&).val();
var $danjia1 = $(this).parent().find(&#bb&).val();
sum+=$shuliang1*$danjia1;
$.each($(&.aaa&),function(n,item){
i+=parseInt($(item).val(),10);
if (isNaN(i))
$(&#sum1&).text(i);
$(&#sum&).text(sum);
.blur(function(){
$(this).val($(this).val().replace(/[^\d.]/gi,&&));
&table width=&100%& border=&1& class=&table_sum&&
&tr class=&jisuan&&&td&
数量&input type=&text& name=&data_&
id='aa' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb' /&&/td&
&td&小计&span id=&xj&&&/span&&/td&
&tr class=&jisuan&&
数量&input type=&text& name=&data_&
id='aa' class=&aaa&/&&/td&
&td&单价&input type=&text& name=&dj&
id='bb'/&&/td&
&td&小计&span id=&xj& &&/span&&/td&
&span id=&sum1&&
金额总计&span id=&sum&&&/span&
没没加TD标签前正常，加了以后小计和合计都不显示了，js我很菜，改不了啊 如果只有两个id=‘aa’的话：
var $shuliang1 = $(this).parent().find(&#aa&).eq(1).val(); 或者：var $shuliang1 = $(this).parent().find(&#aa :first&).val();
var $shuliang2 = $(this).parent().find(&#aa&).eq(2).val(); 或者：var $shuliang2 = $(this).parent().find(&#aa :last&).val(); 如果有多个相同的话就可以用each()了；具体用法参考Jqueryr的API。
&script type=&text/javascript& src=&/jquery-2.0.0.min.js&&&/script&
$(function(){
$(&.jisuan input&).blur(function(e) {
var $shuliang = $(this).parent().find(&#aa&).val();
var $danjia = $(this).parent().find(&#bb&).val();
var $xiaoji =$(this).parent().find(&#xj&);
$temp=parseInt($xiaoji.text());
if(isNaN($temp))$temp =0;
$xiaoji.text($shuliang*$danjia);
$current=parseInt($(&#sum&).text());
$(&#sum&).text($current-$temp+$shuliang*$danjia);
&table width=&100%& border=&1& class=&table_sum&&
&tr class=&jisuan&&&td&
数量&input type=&text& name=&data_&
单价&input type=&text& name=&data_&
id='bb' /&
小计&span id=&xj&&&/span&&/td&
&tr class=&jisuan&&
数量&input type=&text& name=&data_&
单价&input type=&text& name=&data_&
小计&span id=&xj&&&/span&
金额总计&span id=&sum&&0&/span&
不要随便用thisjs中获取 table节点各tr及td的内容简单实例
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇js中获取 table节点各tr及td的内容简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
&table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"&
&td height="25"&第一行&/td&
&td height="25"&第二行&/td&
&td height="25"&第三行&/td&
&td height="25"&第四行&/td&
&td height="25"&&input type="button" name="getTableContent" value="获得表格内容" onclick="getTableContent(this)"&&/td&
如上所示代码，按钮点击事件中传入this对象，此对象就是按钮本身。通过以下方法测试获取表格的数据
&script language="javascript"&
function getTableContent(node) {
// 按钮的父节点的父节点是tr。
var tr1 = node.parentNode.parentN
alert(tr1.rowIndex);
alert(tr1.cells[0].childNodes[0].value); //获取的方法一
alert(tr1.cells[0].innerText);
// 通过以下方式找到table对象，在获取tr，td。然后获取td的html内容
var table = document.getElementById("tb1");//获取第一个表格
var child = table.getElementsByTagName("tr")[rowIndex - 1];//获取行的第一个单元格
var text = child.firstChild.innerHTML;
window.alert("表格第" + rowIndex + "的内容为: " + text);
以上就是小编为大家带来的js中获取 table节点各tr及td的内容简单实例全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具