table单元格和input的完美结合，兼容IE和火狐

#formTitle("grid配置")
<Script language = "JavaScript">

    var curSrc=null;
    
    function checkUpdate111(){
        var groupId = aForm.id.value;
        if(groupId==""){
            alert("请选择记录进行保存");
            return false;
        }
        if(window.cofirm("确认保存吗？")){
        return true;
        }
        return true;
    }
    function  EditCell(e){
         var i=0,j=0;
         var wid=0;
         var Val='';
         var myevent = e || window.event;
         var Scr= myevent.srcElement||myevent.target;
          if(Scr.tagName=="TD")
          {
            wid=Scr.clientWidth-3;
            Val=Scr.innerHTML;
            wid = 1;

            Scr.innerHTML="<input id='InputText' style='width:100%' οnblur='return CellOut(event)' size='10' " + "value='" +document.getElementById('MyTable').rows[i].cells[j].innerText+"'>";

变更为下面的，去掉的那部分是没有必要的

            Scr.innerHTML="<input id='InputText' style='width:100%' οnblur='return CellOut(event)' size='10' " + "'>";

            document.getElementById('InputText').value=Val;
            curSrc=Scr;
             Scr.children[0].focus();
          }
    }
    
    function CellOut(e)
    {
         var myevent = e || window.event;
        var Scr= myevent.srcElement||myevent.target;
        var Val='';
        if (curSrc)
        {
            Val=Scr.value;
            curSrc.innerHTML=Val;

        }
    }

</Script>

<form>

            <table width="100%" cellspacing="1" class="frame" id="MyTable">
            <tr bgcolor="#999999">
                <th>选择</th>
            
                <th>列名称</th>
                <th>默认顺序</th>
                <th>默认宽度</th>
                <th>是否选中</th>
                <th>显示顺序</th>
                <th>显示宽度</th>
                
            </tr>
            <tr #bgcolor()>
                <td>
                    <input type="checkbox" name="chkId" value="$!v.getId()"/>
                    <input type="hidden" name="id" value="$!v.getId"/>
                </td>
                
                <td>$!v.getPropertyValue()
                <input type="hidden" name="property_key" value="$!v.getPropertyKey"/>
                <input type="hidden" name="property_value" value="$!v.getPropertyValue"/>
                </td>
                <td>$!v.getOrderNum()
                <input type="hidden" name="order_num" value="$!v.getOrderNum"/>
                </td>
                
                <td>$!v.getColWidth()
                <input type="hidden" name="colWidth" value="$!v.getColWidth"/>
                </td>
                <td>
                    <input type="checkbox" name="checked" checked="$!v.getChecked()" value="$!v.getChecked()"/>
                
                </td>
            
                <td OnClick="return EditCell(event)"></td>
                <td OnClick="return EditCell(event)"></td>
            </tr>
            #end
            </table>
</form>
</table>

0.要编辑的td直接最好要无缝紧紧挨着，避免空行空格等被放入input中

1.测试发现IE8，IE9在input展现后无明显扩张感，IE10和火狐有略微扩张感

2.注意event是IE内置的，火狐的可以通过事件函数参数中获取

详情参考http://blog.csdn.net/cdefg198/article/details/6827404

3.var myevent = e || window.event;

||是短路或，如果e存在，相当于true,立即返回e赋值给myevent

以上知识来源于论坛：http://bbs.csdn.net/topics/30386520

在此基础上修正改进后所得，从而达到对浏览器的兼容和效果的完善

感谢前辈们的辛苦和无私的分享，也愿我的努力给更多的朋友带来方便