[英]Getting the cell data from the HTML Table using Java script upon pressing Edit button
I created a HTML table and populated with the values from the database. 我创建了一个HTML表,并填充了数据库中的值。 Now i wanna create edit functionality to this table.I added Edit button to each row of the table.
现在我想为该表创建编辑功能。我向表的每一行添加了“编辑”按钮。 I need to know the corresponding rowID upon pressing the relevant edit button.I am using java script to get the ID of the row but unfortunately i was getting only details of First row.
我需要在按下相关的编辑按钮后知道相应的rowID。我正在使用Java脚本来获取该行的ID,但不幸的是,我仅获得了第一行的详细信息。 I guess i need to put some for loop.
我想我需要把一些循环。 I need this ID to pass another page so that it populates the values of that corresponding entries and user can edit the entries and save them.
我需要此ID来传递另一个页面,以便它填充相应条目的值,并且用户可以编辑条目并保存它们。
(I am developing in dotnet but i dont wanna use any gridview control to do this). (我在dotnet中进行开发,但我不想使用任何gridview控件来执行此操作)。
Please send me any sample code or solution if you have. 如果有的话,请给我发送任何示例代码或解决方案。
<tr id= "listings">
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black;" id = "ids">@@P.ID@@</td>
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">@@P.NAME@@</td>
<td style="width:2%; vertical-align:top; border-bottom: solid 1px black; text-align:right;"> </td>
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black;">@@P.DESCRIPTION@@</td>
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black;">@@P.DATEAPPROVED@@</td>
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">@@P.TOTALCOST@@</td>
<td style="width:2%; vertical-align:top; border-bottom: solid 1px black; text-align:right;"> </td>
<td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">
<button name = "editButton" type = "button" value = "Edit" onclick="test()">
Edit
</button>
</td>
</tr>
<script type="text/javascript">
function test() {
var elTableRow = document.getElementById("listings");
var elTableCells = elTableRow.getElementsByTagName("td");
alert(elTableCells[0].innerText);
}
</script>
Your code is not working because what the test method does is: 您的代码无法正常工作,因为测试方法是:
- Get the first element whose id is listing -获取ID为列表的第一个元素
- Get all elements with tag name td inside listings -在列表中获取标签名称为td的所有元素
- Show first td's innerText -显示第一个TD的innerText
What you want to do is: 您想要做的是:
- In the click event, get the row for which the button was clicked -在click事件中,获取单击了按钮的行
- Display the data of the row -显示行数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.