javaScript的表格点击后可以输入

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
    window.onload = function(){
        var oTd = document.getElementById('d');
        var i = 0;
        var oInput = document.createElement('input');
        var oSpan = document.getElementById('jieguo');
        oInput.setAttribute('type','text');
        oInput.setAttribute('id','text');
        oTd.onclick = function(){
            if(i == 0){
                oSpan.appendChild(oInput);
                i++;
            }
        };
        oInput.onblur = function(){
            oSpan.innerHTML = oInput.value;
            i--;
        };
    };
</script>
</head><body>
    <table border="10">
        <tr>
            <td id="d">dian wo<span id="jieguo"></span></td>
        </tr>
    </table>
</body>
</html>

五行五列的表格，点击任意一个时，单元格就变成我需要的颜色（蓝色）。然后用键盘也可以选中，当然也要变色。如果在点击时就想达到能够输入文字。
window.onload = function() {
    var table = document.getElementById('table1');
    for (var i = 0; i < table.rows.length; i++) {
        var row = table.rows[i];
        for (var j = 0; j < row.cells.length; j++) {
            row.cells[j].onclick = setColor;
            row.cells[j].onkeyup = setColorKey;
        }
    }
}var selectedCell;
function setColor() {
    var cell = window.event.srcElement;
    cell.onclick = createInput;
    if (selectedCell) {
        if (selectedCell != cell) {
            selectedCell.className = "";
            cell.className = "selected";
            selectedCell = cell;
        }    }
    else {
        cell.className = "selected";
        selectedCell = cell;
    }
}
function setColorKey() {
    var table = document.getElementById('table1');
    var key = window.event.keyCode;
    var cell = window.event.srcElement;
    var row = cell.parentElement;    createInput();
    if (key == 37 && cell.cellIndex > 0) {
        var i = row.rowIndex;
        var j = cell.cellIndex;
        var temp = table.rows[i].cells[j - 1];
        temp.className = "selected";
        temp.focus();
        cell.className = "";
        selectedCell = temp;    }
    if (key == 38 && row.rowIndex > 0) {
        var i = row.rowIndex;
        var j = cell.cellIndex;
        var temp = table.rows[i - 1].cells[j];        temp.className = "selected";
        temp.focus();
        cell.className = "";
        selectedCell = temp;
    }
    if (key == 39 && cell.cellIndex < 4) {
        var i = row.rowIndex;
        var j = cell.cellIndex;
        var temp = table.rows[i].cells[j + 1];
        temp.className = "selected";
        temp.focus();
        cell.className = "";
        selectedCell = temp;
    }
    if (key == 40 && row.rowIndex < 4) {        var i = row.rowIndex;
        var j = cell.cellIndex;
        var temp = table.rows[i + 1].cells[j];
        temp.className = "selected";
        temp.focus();
        cell.className = "";
        selectedCell = temp;
    }
}
var createFlag = true;
function createInput()
{
    var cell = window.event.srcElement;//获得事件源
    //判断选定的单元格是否包含<input>,默认已经有了 
    if (cell.innerHTML.length >6) {
        createFlag = false;
    }
    else if (createFlag) {
        var txt = document.createElement("input");
        txt.setAttribute("type", "text");
        cell.appendChild(txt);
        createFlag = false;
        cell.onblur = function()
        {
            createFlag = true;
        }
    }
}
这是我的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
input {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #999999;
    background-color: blue;
    border: 1px solid #999999;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<table width="80%"  border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event)" onkeydown="checkAdd(event)">
  <tr>
    <td width="20%">343</td>
    <td width="20%">sdf</td>
    <td width="20%">asdf</td>
    <td width="20%">asf</td>
    <td width="20%">35r32</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>adfdsf</td>
    <td>adfdsf</td>
    <td>adfsdf  </td>
    <td>   dafssda</td>
    <td>  dafdsf</td>
  </tr>
  <tr>
    <td>2342432</td>
    <td>asdf</td>
    <td> dfsasdfds</td>
    <td>3243243</td>
    <td>asdfasf</td>
  </tr>
  <tr>
    <td>h</td>
    <td>ghhhh</td>
    <td>hhhh</td>
    <td>ea</td>
    <td>ghghhh</td>
  </tr>
</table>
</body>
</html>
<script language="javascript">
oldObj="";
var newInput=document.createElement("input");
newInput.type="text";
function setEdit(e){
    var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);
    var obj;
    if(tdObj.tagName && tdObj.tagName=="TD"){
        if(oldObj!=""){
            var tobj = document.getElementById('tmpText');
            oldObj.removeChild(tobj);
            if(newInput.vlaue=="")
              oldObj.innerHTML=" ";
            else
              oldObj.innerHTML=newInput.value;
        }        obj=tdObj;
        oldObj=obj;
        newInput.width=obj.offsetWidth;
        newInput.height=obj.offsetHeight;        newInput.id="tmpText";
        newInput.value=obj.innerHTML;
        obj.innerHTML="";
        obj.appendChild(newInput);
        newInput.focus();
    }
    tdObj = obj = tobj = null;
}
function checkAdd(e){
    if(e && e.keyCode == 13){
       var obj = e.srcElement? e.srcElement : e.target;
       var tbl = obj.parentNode.parentNode;
        if(oldObj!=""){
            var tobj = document.getElementById('tmpText');
            oldObj.removeChild(tobj);
            if(newInput.vlaue=="")
              oldObj.innerHTML=" ";
            else
              oldObj.innerHTML=newInput.value;
            var oldObj2 = oldObj;
            oldObj = '';
        }
       if(tbl.tagName && tbl.tagName == 'TR'){
         t2 = tbl.cloneNode(true);
         tbl.parentNode.insertBefore(t2,tbl);
       }
       setEdit(oldObj2);
    }
    obj = tbl = tobj = t2 = oldObj2 = null;
}
</script>
</body>
</html>

to LZ 昨天不是给你改了你的移动变色代码吗?
你不看回贴的?

结贴率能说明一切吗。我是刚开同的csdn。新手啊。技术不行向各位高手请教怎么了。难得我还没有个学习的机会了

如果你那个已经改出来的话,结合那个来修改这个是非常简单的. 因为基本都是dom的tag调用,甚至连id和判定条件都不需要改

你看看我写的，我就是弄不出来啊。说实话我现在刚学javaScript。帮帮忙啊

张斌大哥，你我现在对dom非常不熟悉。帮忙让我对dom了解一下好吗

s_liangchao1s要不是你说有结贴这回事。我还真的不知道要结贴呢。谢谢提醒啊。好习惯从现在开始做就是了。我一共才发了几个帖子，一看就知道是新手嘛。想学点东西可真难啊

调试易

javaScript的表格点击后可以输入

解决方案 »