js获取循环表格中的按钮点击事件及当前行内容

js获取循环表格中的按钮点击事件及当前行内容,第1张

拿走,不谢,表格本来是空的

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>js</title>

<style type="text/css">

</style>

<script>

windowonload=function(){

var str='';

var x=documentgetElementById('s');

for(var i=1;i<4;i++){

str+='<tr>';

for(var j=1;j<3;j++){

str+='<td>这是第'+i+'行,第'+j+'列</td>';

}

str+='<td><button>点我</button></td></tr>';

}

sinnerHTML=str;

var b=documentgetElementsByTagName('button');

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

b[i]onclick=function(){

alert(thisparentNodeparentNodeinnerText);

}

}

}

</script>

</head>

<body>

<table id="s"></table>

</body>

</html>

function test(){

var tab = documentgetElementById('tab');

var len = tabgetElementsByTagName('tr')length;

var rownum = len<10objNamesubstring(objNamelength-1):objNamesubstring(objNamelength-2);

}

其实如果你只是想要获取当前行号的话,没必要从id截取字符串,这样写:

<script language="javascript">

windowonload=function(){

var tab = documentgetElementById('tab');

var objs = tabgetElementsByTagName('input');

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

objs[i]onclick=function(){

var rownum = thisparentNodeparentNoderowIndex+1;

alert("我所在的行号为:"+rownum);

}

}

}

</script>

<table border="1" id="tab" width="37%">

<tr>

<td width="68"><input type="text" value="点击我获取行号" /></td>

<td>x4</td>

</tr>

<tr>

<td width="68"><input type="text" value="点击我获取行号" /></td>

<td>14</td>

</tr>

<tr>

<td width="68"><input type="text" value="点击我获取行号" /></td>

<td>24</td>

</tr>

<tr>

<td width="68"><input type="text" value="点击我获取行号" /></td>

<td>34</td>

</tr>

<tr>

<td width="68"><input type="text" value="点击我获取行号" /></td>

<td>44</td>

</tr>

</table>

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循环嵌套遍历一下就可以了

<html>

<head>

<title>Table Test</title>

<meta name="generator" content="Editplus" />

<meta name="author" content="PJ" />

<script language="JavaScript">

<!--

function Delete()

{

var dgTable=documentgetElementById('tb')rows;//tb为table的ID,

var pp=windoweventsrcElement;

for (var i=0; i < dgTablelength; i++) //遍历table的行,

{

if(pp==dgTable[i]cells[2]getElementsByTagName("A")[0]) //cells[2]为触发事件的列的索引

{ //判断是否是触发事件的A标签

alert(dgTable[i]cells[0]innerText); //演示,d出所在行的第一列的内容

}

}

}

//-->

</script>

</head>

<body>

<table id="tb" border="1px" width="500px">

<tr>

<td width="40%">aaa</td>

<td width="40%">bbb</td>

<td width="15%"><a onclick="Delete()" href="#">delete</a></td>

</tr>

<tr>

<td>ccc</td>

<td>ddd</td>

<td><a onclick="Delete()" href="#">delete</a></td>

</tr>

<tr>

<td>eee</td>

<td>fff</td>

<td><a onclick="Delete()" href="#">delete</a></td>

</tr>

</table>

</body>

</html>

监听回车键是否按下应该就可以了

下面写了个简单的例子

<body>

<script>

function handleRowNum(event,id){

var code=null,

target=documentgetElementById(id);

//如果是IE

if(windowevent){

code=windoweventkeyCode;

}

//如果是其他

else if(eventwhich){

code=eventwhich;

}

//按下回车键

if(code==13){

targetvalue=parseInt(targetvalue)+1;

}

}

</script>

<textarea wrap="off" onkeypress="handleRowNum(event,'num')" style="width:280px;height:180px;overflow:auto"></textarea>

<input type="text" id="num" size="3" value="0" readonly/>

</body>

以上就是关于js获取循环表格中的按钮点击事件及当前行内容全部的内容,包括:js获取循环表格中的按钮点击事件及当前行内容、js如何取行号、在js中怎样获取当前页面表格中的数据等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: https://outofmemory.cn/web/10137355.html

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

发表评论

登录后才能评论

评论列表(0条)

保存