首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript 可编辑表格有关问题

2012-02-15 
javascript 可编辑表格问题!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN http://www.w3.or

javascript 可编辑表格问题
<!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=gb2312 "   />
<title> 无标题文档 </title>
<style   type= "text/css ">
.select{border:medium;   border-style:solid;   border-width:thick;}
</style>
</head>

<body>

<script   language= "javascript ">
var   thisid;
var   text;

function   inputtext(obj){
thisid=document.getElementById(obj);
text=thisid.innerText;
thisid.innerHTML= " <input   id=t   type= 'text '     onblur= 'backchange() '   name= 'textfield '   style= 'width:100%;height:28px;border:1px   solid   #CCCCFF;line-height:28px;   font-family:   宋体;   color:   #000000;   font-size:   16pt '   /> ";
document.all.t.value=text;
document.all.t.focus();
}

function   backchange(){
text=document.all.t.value;
thisid.innerHTML=text;
}

function   selected(objs){
theId=document.getElementById(objs);
theId.class= "select ";
//theId.style.background= "#fff000 ";
//theId.style.border=solid;  
//theId.style.border-color=#999999;  
//theId.style.border-style=solid;  
//theId.style.border-width=2px;
//theId.style.border-width= "3 ";


}

</script>
<br   />
<br   /> <br   /> <br   />

<table     name= "text "   id= "text "   width= "100% "   border= "0 "   cellspacing= "0 "   cellpadding= "0 ">
    <tr>
        <td   height= "30 "   width= "30% "   id= "11 "   bgcolor= "#00FF66 "   onclick= "selected( '11 ') "   ondblclick= "inputtext( '11 '); "> &nbsp; </td>
        <td   height= "30 "   width= "30% "   id= "12 "   bgcolor= "#00FF66 "   onclick= "selected( '12 ') "   ondblclick= "inputtext( '12 '); "> &nbsp; </td>
        <td   height= "30 "   width= "40% "   id= "13 "   bgcolor= "#00FF66 "   onclick= "selected( '13 ') "   ondblclick= "inputtext( '13 '); "> &nbsp; </td>
    </tr>
    <tr>
        <td   height= "30 "   width= "30% "   id= "21 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '21 '); "> &nbsp; </td>
        <td   height= "30 "   width= "30% "   id= "22 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '22 '); "> &nbsp; </td>
        <td   height= "30 "   width= "40% "   id= "23 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '23 '); "> &nbsp; </td>


    </tr>
    <tr>
        <td   height= "30 "   width= "30% "   id= "31 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '31 '); "> &nbsp; </td>
        <td   height= "30 "   width= "30% "   id= "32 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '32 '); "> &nbsp; </td>
        <td   height= "30 "   width= "40% "   id= "33 "   bgcolor= "#00FF66 "   ondblclick= "inputtext( '33 '); "   style= "border:solid;   border-color:#999999;   border-style:solid;   border-width:2px; "> &nbsp; </td>
    </tr>
</table>
</body>
</html>

问题--》--》--》
theId.class= "select ";
//theId.style.background= "#fff000 ";
//theId.style.border=solid;  
//theId.style.border-color=#999999;  
//theId.style.border-style=solid;  
//theId.style.border-width=2px;
//theId.style.border-width= "3 ";
或者
//theId.class= "select ";
theId.style.background= "#fff000 ";
theId.style.border=solid;  
theId.style.border-color=#999999;  
theId.style.border-style=solid;  
theId.style.border-width=2px;
theId.style.border-width= "3 ";
都报错
但是:

//theId.class= "select ";
theId.style.background= "#fff000 ";
//theId.style.border=solid;  
//theId.style.border-color=#999999;  
//theId.style.border-style=solid;  
//theId.style.border-width=2px;
//theId.style.border-width= "3 ";

就可以,为什么??
我的意图很明确:双击表格可以编辑,单击使表格处于选中状态(即,样式改变)



[解决办法]
theId.style.border= 'solid 2px #999999 ';

热点排行