<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>如上代码,一个空表格,我要实现单击某行时:
1、背景变色
2、在此行正下方的正中间创建2个按钮“确定”与“取消”
3、在点击取消时,一切又还原了,即还原成了原始的空表格(背景没了,按钮也不见了)
下面是我的理想图:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>如上代码,一个空表格,我要实现单击某行时:
1、背景变色
2、在此行正下方的正中间创建2个按钮“确定”与“取消”
3、在点击取消时,一切又还原了,即还原成了原始的空表格(背景没了,按钮也不见了)
下面是我的理想图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var t, n, c;
var lastrow;
var lasttd1;
var lasttd2;
var nextRow;
window.onload=function(){
t = document.getElementById("tb");
n = t.rows.length;
for(var i=0;i<n;i++){
t.rows[i].onclick = function(){
if(lastrow) {
lastrow.style.backgroundColor="#ffffff";
t.rows[nextRow].cells[1].innerHTML=lasttd1;
t.rows[nextRow].cells[2].innerHTML=lasttd2;
}
lastrow=this;
this.style.backgroundColor="#cceeff";
nextRow=this.rowIndex+1;
if(nextRow<3){
lasttd1= t.rows[nextRow].cells[1].innerHTML;
lasttd2=t.rows[nextRow].cells[2].innerHTML;
t.rows[nextRow].cells[1].innerHTML="<input type=button value=\"确定\">";
t.rows[nextRow].cells[2].innerHTML="<input type=button value=\"取消\">"
}else{
nextRow=0
}
};
}
}
</script>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head> <body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>浏览器对td的innerHTML属性支持不是很好,稍后给你改个好点版本
做好定位就行.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var t, n, c;
var lastrow;
var lasttd1;
var lasttd2;
var nextRow;
window.onload=function(){
t = document.getElementById("tb");
n = t.rows.length;
for(var i=0;i<n;i++){
t.rows[i].onclick = function(){
if(lastrow) {
lastrow.style.backgroundColor="#ffffff";
}
lastrow=this;
this.style.backgroundColor="#cceeff";
var nextRow=this.rowIndex+1;
if(nextRow<3){
document.getElementById("movediv").style.left=this.cells[1].offsetLeft+20;
document.getElementById("movediv").style.top=t.rows[nextRow].offsetTop+20;
document.getElementById("movecalcel").style.left=this.cells[2].offsetLeft+20;
document.getElementById("movecalcel").style.top=t.rows[nextRow].offsetTop+20;
}
};
}
}
</script>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head> <body> <div id=movediv style="position:absolute;width:23%;height:20px;z-index:2"><input type="button" value="确定"></div>
<div id=movecalcel style="position:absolute;width:23%;height:20px;z-index:2"><input type="button" value="取消"></div> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
<thead></thead>
<tbody> <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></tbody> </table>
</body>
</html>
把两个浮动div不用的时候隐藏掉就行了
不能将要创建的按钮先放入BODY里面,要用JS去创建,这样的话,事件都消失了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <script>
var t, n, c;
var lastrow;
var lasttd1;
var lasttd2;
var nextRow;
window.onload=function(){
createOKDiv();
createCANDiv();
t = document.getElementById("tb");
n = t.rows.length;
for(var i=0;i<n;i++){
t.rows[i].onclick = function(){
if(lastrow) {
lastrow.style.backgroundColor="#ffffff";
}
lastrow=this;
this.style.backgroundColor="#cceeff";
var nextRow=this.rowIndex+1;
if(nextRow<3){
document.getElementById("movediv").style.display="block";
document.getElementById("movecalcel").style.display="block";
document.getElementById("movediv").style.left=parseInt(this.cells[1].offsetLeft)+20+"px"; document.getElementById("movediv").style.top=parseInt(t.rows[nextRow].offsetTop)+15+"px";
document.getElementById("movecalcel").style.left=parseInt(this.cells[2].offsetLeft)+20+"px";
document.getElementById("movecalcel").style.top=parseInt(t.rows[nextRow].offsetTop)+15+"px";
}else{
document.getElementById("movediv").style.display="none";
document.getElementById("movecalcel").style.display="none";
}
};
}
}
function createOKDiv(){
var movediv=document.createElement("div");
movediv.className="movediv";
movediv.id="movediv";
var inputOk=document.createElement("input");
inputOk.type="button";
inputOk.value="确定";
movediv.appendChild(inputOk);
document.body.appendChild(movediv)
}
function createCANDiv(){
var movediv=document.createElement("div");
movediv.className="movecalcel";
movediv.id="movecalcel";
var inputCancel=document.createElement("input");
inputCancel.type="button";
inputCancel.value="取消";
movediv.appendChild(inputCancel);
document.body.appendChild(movediv);
}
</script>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
#movediv{
position:absolute;
width:23%;
height:20px;
z-index:2;
display:none;
}
#movecalcel{
position:absolute;
width:23%;
height:20px;
z-index:2;
display:none;
}
</style>
</head> <body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
<thead></thead>
<tbody> <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></tbody> </table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" onclick="RowClick();">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table><div id="divButtons"
style="text-align:center; position:absolute;width:100%; left:0px; top:0px;">
<input type="button" value="确定" onclick="Confirm();" />
<input type="button" value="取消" onclick="Cancel()" />
</div>
<script language="javascript" type="text/javascript">
var currentRow = null;
var buttons = document.getElementById("divButtons");
buttons.style.display = "none";
function RowClick() {
var row = FindRow();
if (row == null) return;
if (currentRow != null) {
currentRow.style.backgroundColor = "";
}
currentRow = row;
currentRow.style.backgroundColor = "#C5E2E3";
ShowButtons();
}
function FindRow() {
var dom = event.srcElement;
while (dom.tagName) {
if (dom.tagName == "BODY") return null;
if (dom.tagName == "TR") return dom;
dom = dom.parentNode;
}
return null;
}
function ShowButtons() {
var rects = currentRow.getClientRects();
var rect = rects[0];
buttons.style.top = (rect.bottom + 5) + "px";
buttons.style.display = "block";
}
function HideButtons() {
buttons.style.display = "none";
}
function Confirm() {
HideButtons();
}
function Cancel() {
if (currentRow != null) {
currentRow.style.backgroundColor = "";
}
HideButtons();
}
</script>
</body>
</html>