目的:用JS获取鼠标点击表格某行数据,然后在JSP中将数据传到servlet进行处理
网上有人说用AJAX可以简单实现,但小弟还没接触AJAX,就只有自已想办法用JS处理。
方法:设置一个隐藏域,在JS里放一个方法监控鼠标对表格的点击操作并将数据传给隐藏域。在JSP中设置FORM提交隐藏域给后台SERVLET
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function clickRow(row){
//点击行变色处理
if(row.style.backgroundColor == ""){
var tbSource = $("tbSource");
for(var i=0; i<tbSource.rows.length; i++){
tbSource.rows[i].style.backgroundColor = "";
}
row.style.backgroundColor = "#dddddd";
}else{
row.style.backgroundColor = "";
}
document.getElementById('row').value=row.cells[1].innerText;//将所点击行数据传给隐藏域
}
function postRow(){
document.deleteAdmin.submit();
}
window.onload = function(){
var tbSource = $("tbSource");
for(var i=0; i<tbSource.rows.length; i++){
tbSource.rows[i].onclick = function(){
clickRow(this);
}
}
};
</script>
JSP表单:
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="tbSource">
<tr>
<td height=20 ><form name="deleteAdmin" method="post" action="addAdmin">
<input type="hidden" name="row" >
<input type="hidden" name="action" value="delete" ></form></td>
<a href="#" οnclick="postRow()">删除</a></td>
</tr>
</table>