用js选择器获得table中tr里第二个td

用js选择器获得table中tr里第二个td,第1张

<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0">

<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 height="25"><input type="button" name="getTableContent" value="获得表格内容" onclick="getTableContent(this)"></td>

</tr>

</table>

如上所示代码,按钮点击事件中传入this对象,此对象就是按钮本身。通过以下方法测试获取表格的数据

<script language="javascript">

function getTableContent(node) {

// 按钮的父节点的父节点是tr。

var tr1 = nodeparentNodeparentNode;

alert(tr1rowIndex);

alert(tr1cells[0]childNodes[0]value); //获取的方法一

alert(tr1cells[0]innerText);

// 通过以下方式找到table对象,在获取tr,td。然后获取td的html内容

var table = documentgetElementById("tb1");//获取第一个表格

var child = tablegetElementsByTagName("tr")[rowIndex - 1];//获取行的第一个单元格

var text = childfirstChildinnerHTML;

windowalert("表格第" + rowIndex + "的内容为: " + text);

}

</script>

1、JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells

使用实例: oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]

2、遍历

var oTable=documentgetElementById("表格id");

oTabletBodies[0]可以看成是rows和cells组成的二维数组,用两个for循环嵌套遍历一下就可以了

function init()

 {

   vartable =documentgetElementById("tab1");

   varrows = tablerowslength;

   alert('行数'+rows);

   varcolums = tablerows[0]cellslength;

   alert('列数'+colums);

 }

----根据列数自动循环显示隐藏

成果库修改       要求主题列表随成果类型改变而改变       网上查询资料后开工 在成果类型下拉框添加change()事件触发Dwr 查询主题集合——动态创建/编辑Table       概要代码如下 JS

复制代码 代码如下: //动态获取主题数据 function getzts(){     parentId = document getElementById("bselect ") value;     if(parentId!=""){         dwrMethod getZtList(parentId callback );     }else{         //清空主题Table的数据                           var t=document getElementById("zhutiTable");  //获取Table         var length= t rows length;          //获得Table下的行数         if(length!= ){              //如果有行 则清空             for(var i=length ;i>= ;i )              {               t deleteRow(i);                 }         }         var r = t insertRow();         var c = r insertCell();         c innerHTML="暂无主题列表";         document getElementById( zhutiTable ) appendChild(t);     } } function callback (provinces){     var t=document getElementById("zhutiTable");     //获取Table     var length= t rows length;             //获得Table下的行数     if(length!= ){                      //如果有行 则清空         for(var i=length ;i>= ;i )              {                  t deleteRow(i);                     }      }     if(provinces length> ){                                   for (var i = ; i < provinces length; i++) {             //tr                     if(i% == ){                         var r = t insertRow(t rows length);//创建新的行                      }                     //td              var c = r insertCell();                //创建新的列             c innerHTML = "<input type= checkbox name= zhutiIds value="+provinces[i][ ]+">"+provinces[i][ ];             }     }else{         var r = t insertRow();         var c = r insertCell();         c innerHTML="暂无主题列表";     }     document getElementById( zhutiTable ) appendChild(t); }

复制代码 代码如下: lishixinzhi/Article/program/Java/JSP/201311/19848

<body>

<table class="tbeTarget" id="tbeTarget">

<tr>

<td class="tips1" id="tips1"> 12345abcd </td>

<td class="tips2" id="tips2"> 23456fvbg </td>

</tr>

</table>

<input type="button" onclick="getTdValue();" value="GETTDVALUE">

</body>

获取标签建议还是用ID来获取,简单方便

用getElementById("tbeTarget")可获取table

用getElementById("tips2")可获取到tips2

有ID的话,getElementById("tbeTarget")tips2也能得到你要的 tips2

特殊情况实在不能用ID时,也可用getElementsByTagName

var o=documentgetElementsByTagName("table"); 这个就获取到了所有的table标签,返回值是数组类型的

像你这个代码的话,只有个一个table,那 o[0]就是你要的table标签了

实在要用getElementByClassName的话,

var o=documentgetElementByClassName("tbeTarget");

var ot=ogetElementsByTagName("td"); //直接用ogetElementByClassName("tips2")应该也可以

for(var i=0;i<otlength;i++){

if(ot[i]class=="tips2"){

alert(ot[i]); //在这if里面,用ot[i]调用到的就是你要的 tips2了

}

}

以上就是关于用js选择器获得table中tr里第二个td全部的内容,包括:用js选择器获得table中tr里第二个td、在js中怎样获取当前页面表格中的数据、JS如何获取table有多少行和列等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10148551.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存