|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 網頁上有個表格，能不能做單擊一個格子
網頁上有個表格有很多格子，能不能做單擊一個格子，在它邊上出現一個單行文本框和一個確定按鈕，輸入值並確定以後，格子裡的內容就變成剛才輸入的值，每個格子能這樣操作。謝謝，怎麼寫？ |
| 謝謝各位高手！又沒有人知道？ |
表格有很多格子,這個格子是什麼??
如果是表格,當點擊時,顯示一層,層上有單行文本框和一個確定按鈕,
輸入後,使用innerHTML就OK... |
無聊，作了一個表格。。。
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META name="Author" content="Sheneyan" />
<script type="text/javascript">
function setTableEditable(name){
var table=document.getElementById(name);
var tds=table.getElementsByTagName("td");
for (var i=0,td;td=tds[i];i++){
td.onclick=function(){
if (this.getAttribute("edit")=='a')return;
var t=this.innerHTML;
this.innerHTML=document.getElementById("ed").innerHTML.replace(/@value/gi,html2txt(t));
this.setAttribute('edit','a');
}
}
}
//html轉換成txt
function html2txt(str){
return str.replace(/>/g,">").replace(/</g,"<").replace(/ /g," ").replace(/&/g,"&");
}
//txt轉換成html
function txt2html(str){
return str.replace(/&/g,"&").replace(/ /g," ").replace(/</g,"<").replace(/>/g,">");
}
//判斷回車
function chkEnter(e){
var kc=document.all?event.keyCode:e.which;
var cur=document.all?event.srcElement:e.target;
if (kc==13){
var t=nextObj(cur);
if (t)
t.onclick();
}
}
//下一個對像
function nextObj(cur){
var t=cur;
do{
t=t.nextSibling
}while (t&&t.nodeType!=1);
return t;
}
//上一個對像
function prevObj(cur){
var t=cur;
do{
t=t.previousSibling;
}while (t&&t.nodeType!=1);
return t;
}
//保存
function save(cur){
var t=prevObj(cur),v;
if (t)v=t.value;
cur.parentNode.setAttribute("edit",'b');
cur.parentNode.innerHTML=txt2html(v);
}
</script>
<style type="text/css">
table{border:solid 1px black;border-collapse:collapse}
td{border:solid 1px;}
input{border:solid 1px;height:20px}
input#t1{width:50px}
div#ed{display:none}
</style>
</head>
<body onload="setTableEditable('test')">
<table id="test">
<tr><td>1</td><td>v</td><td>ff</td><td>zxc</td><td>weqw</td><td>fg</td><td>hhh</td><td>jjj</td></tr>
<tr><td>2</td><td>我</td><td>h</td><td>hdfq</td><td>wertyuj</td><td>ccxa</td><td>hw12</td><td>cz</td></tr>
<tr><td>3</td><td>x</td><td>j</td><td>cvx</td><td>teh</td><td>hdf</td><td>zxc</td><td>df</td></tr>
<tr><td>4</td><td>n</td><td>dfg</td><td>zz</td><td>123</td><td>zxcv</td><td>tg</td><td>zc</td></tr>
<tr><td>d87</td><td>z</td><td>sdf</td><td>ee</td><td>rr</td><td>tt</td><td>yy</td><td>uu</td></tr>
<tr><td>d</td><td>v</td><td>sd</td><td>cc</td><td>zz</td><td>aa</td><td>qq</td><td>ww</td></tr>
<tr><td>gs</td><td>cc</td><td>s</td><td>rr</td><td>dd</td><td>ccc</td><td>zz</td><td>xx</td></tr>
<tr><td>g</td><td>s</td><td>hh</td><td>kjg</td><td>a</td><td>www</td><td>ee</td><td>rr</td></tr>
</table>
<div id="ed">
<input id="t1" value="@value" onkeyup="chkEnter(event)"/>
<input id="t2" type="button" onclick="save(this)" value="保存"/>
</div>
</body>
</html>[/html] |
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Untitled Document</title>
<style type="text/css">
<!--
input {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
background-color: #FFFFE1;
border: 1px solid #999999;
}
-->
</style>
</head>
<body>
<div id="aa"></div>
<table width="80%" id="tab1" border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event.srcElement)">
<tr>
<td width="20%" id="td1">a</td>
<td width="20%">bb</td>
<td width="20%">asdf</td>
<td width="20%">eee</td>
<td width="20%">adsf</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>9</td>
</tr>
<tr>
<td>as</td>
<td>asdfsdfa</td>
<td>sadfsdaf</td>
<td>sadfsdfa</td>
<td>sdafsadf</td>
</tr>
<tr>
<td>sadfsdfa</td>
<td>asdf</td>
<td> </td>
<td>asdfasdf</td>
<td>asdfasf</td>
</tr>
<tr>
<td>asdfsadf</td>
<td>asdfsadf</td>
<td>asdfasdfasd</td>
<td>ea</td>
<td>asdfasfd</td>
</tr>
</table>
</body>
</html>
<script>
oldObj="";
var newNode=document.createElement("input");
newNode.type="text";
function setEdit(click_td){
var obj;
if(click_td.tagName=="TD"){
if(oldObj!=""){
oldObj.removeChild(eval("tmpText"));
if(newNode.vlaue=="") oldObj.innerText=" ";
else oldObj.innerText=newNode.value;
}
obj=click_td;
oldObj=obj;
//newNode.width=obj.clientWidth;
//newNode.height=obj.clientHeight;
newNode.width=obj.offsetWidth;
newNode.height=obj.offsetHeight;
newNode.id="tmpText";
newNode.value=obj.innerText;
obj.innerText="";
obj.appendChild(newNode);
newNode.focus();
}
}
</script>
[/html] |
謝謝！下午沒人回復。我就自己想了，結果竟然和Sheneyan，xling驚人的相似。請看
不過，要做得更加方便實用。還支持整列修改，點列頭
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網頁 1</title>
</head>
<script language=javascript>
var disinput=0;
function presskey(obj2,obj1)
{
if (event.keyCode==13) noneinput(obj2,obj1);
}
function put1(fcolor,bcolor,isb)
{
var writeb='';
if (isb==1) writeb='font-weight: bold;';
document.write('<table border="0" cellpadding="0" bgcolor="'+bcolor+'" style="border-collapse: collapse" width="100%" height="100%" bordercolor="#7777777" id="table2">')
for (i = 1; i < 97; i++)
{
document.write('<tr><td style="'+writeb+'color:'+fcolor+';border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px;height: 22px" class=es2 align="center" onclick="showinput(this);">'+i+'</td></tr>')
}
document.write('</table>')
}
function showinput(obj1)
{
if (disinput==0)
{
var tdval=obj1.innerText;
obj1.innerHTML='';
obj1.innerHTML='<input type="text" name="T1" id="T1" size="20" style="width=100%;height=100%" class=es2 onblur="noneinput(this,this.parentElement)" onkeydown="return presskey(this,this.parentElement)">';
document.all.T1.value=tdval;
document.all.T1.select();
document.all.T1.focus();
disinput=1;
}
}
function noneinput(obj2,obj1)
{
if (disinput==1)
{
var tdval=obj2.value;
obj1.innerHTML='';
obj1.innerText=tdval;
disinput=0;
}
}
function showtextarea(obj1,fcolor,bcolor,isb)
{
if (disinput==0)
{
var tdval=obj1.innerText;
obj1.innerHTML='';
obj1.innerHTML='<textarea rows="96" name="S1" id="S1" cols="6" class=es2 style="padding:0;padding-left:10px; border-width:0px;line-height: 22px;height=100%;background-color=#000000;color:#FFFFFF" onblur="nonetextarea(this.parentElement,\''+fcolor+'\',\''+bcolor+'\','+isb+')"></textarea>';
document.all.S1.value=tdval;
document.all.S1.select();
document.all.S1.focus();
disinput=1;
}
}
function nonetextarea(obj1,fcolor,bcolor,isb)
{
if (disinput==1)
{
var tdval=obj1.innerText;
var tdarray,tdstring;
var writeb='';
if (isb==1) writeb='font-weight: bold;';
//var bcolor='#ffffff',writeb='',fcolor='#000000';
obj1.innerHTML='';
tdarray=tdval.split('\r');
tdval='';
tdval='<table border="0" cellpadding="0" bgcolor="'+bcolor+'" style="border-collapse: collapse" width="100%" height="100%" bordercolor="#7777777" id="table2">';
for (tdstring in tdarray)
{tdval=tdval+'<tr><td style="'+writeb+'color:'+fcolor+';border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px;height: 22px" class=es2 align="center" onclick="showinput(this);">'+tdarray[tdstring]+'</td></tr>'}
tdval=tdval+'</table>'
obj1.innerHTML=tdval;
disinput=0;
}
}
</script>
<style type="text/css"><!--
td,body { font-size: 9pt}
a:link{ color:#000000; text-decoration:none}
a:visited{COLOR: #000000; TEXT-DECORATION: none}
a:active{color:green;text-decoration:none}
a:hover{color:red;text-decoration:underline}
.es1 { font-family: Tahoma; font-size: 8pt; color: #ffffff }
.es2 { font-family: Tahoma; font-size: 8pt; color: #000000}
.es3 { font-family: Tahoma; font-size: 8pt; color: #ff0000 }
.es4 { font-family: Tahoma; font-size: 8pt; color: #00ff00 }
.es5 { font-family: Tahoma; font-size: 8pt; color: #ff5522 }
.es6 { font-size: 8pt; font-family: Tahoma; color: #ffffff }
.es7 { font-size: 8pt; font-family: Tahoma; color: #ffff00 }
.es8 { font-size: 9pt; font-family: 細明體; color: #ff0000 }
.es9 { font-size: 9pt; font-family: 細明體; color: #538bff }
-->
</style>
<body>
<div align=center>
<table border="1" cellpadding="0" style="border-collapse: collapse" width="783" height="100%" bordercolor="#777777" id="table1">
<form method="POST" action="_derived/nortbots.htm" onSubmit="location.href='_derived/nortbots.htm';return false;" webbot-onSubmit webbot-action="--WEBBOT-SELF--">
<tr>
<td width="4%" align="center" height="21" onclick="showinput();">序號</td>
<td width="10%" align="center" height="21" colspan="2">第1段</td>
<td width="10%" align="center" height="21" colspan="2">第2段</td>
<td width="10%" align="center" height="21" colspan="2">第3段</td>
<td width="10%" align="center" height="21" colspan="2">第4段</td>
<td width="10%" align="center" height="21" colspan="2">第5段</td>
<td width="9%" align="center" height="21" colspan="2">第6段</td>
<td width="9%" align="center" height="21" colspan="2">第7段</td>
<td width="9%" align="center" height="21" colspan="2">第8段</td>
<td width="9%" align="center" height="21" colspan="2">第9段</td>
<td width="10%" align="center" height="21" colspan="2">第10段</td>
</tr>
<tr>
<td width="5%" align="center" height="21">12</td>
<td width="5%" align="center" height="21" onclick="showtextarea(document.all.td1_1,'#ff0000','#dddddd',0);">列頭</td>
<td width="5%" align="center" height="21">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21">列頭</td>
<td width="4%" align="center" height="21">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="4%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="4%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="4%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
<td width="5%" align="center" height="21" style="font-size: 9pt">列頭</td>
</tr>
<tr valign=top>
<td align="center">
<script language=javascript>
put1('#484848','#ffffff',1);
</script>
</td>
<td align="center" id="td1_1" valign="top">
<script language=javascript>
put1('#ff0000','#dddddd',0);
</script>
</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</form>
</table>
</div>
</body>
</html>
[/html]
|
還要不斷修改，最終要根據表格裡的數字生成XML文件。謝謝大家支持
最終結果我會發上來的! |
請教版主,你寫的代碼中
if (t)v=t.value;是什麼意思??這裡應該把t.value賦值給v,
|
cao888在上個帖子中說
寫得沒錯阿！ |
.........
知道沒錯呀,
我問的是 if (t)v=t.value;是什麼意思?? |
| 路過，但不懂程序~佩服你們 |
cao888在上個帖子中說
防止出錯設置的，因為我的那兩個函數（取得上一個對像和下一個對像）不一定能返回正確的值（比如上一個對像不存在，這時候就返回null），所以得判斷返回值是否正確，如果確實是，才去取得它的value（我這裡沒判斷是否是input:D偷懶了），雖然這個判斷在這裡似乎不是很重要，不過還是留下來了，簡單的防止錯誤而已。 |
| 子烏的兼容性好 |
|
