
<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有多少行和列等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)