js添加删除行和双击变文本框的脚本

<!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> 
    <title>js添加删除行和双击变文本框---阿会楠练习作品</title> 
    <style type="text/css"> 
    *{ 
        font-size:12px; 
    } 
    #myTable{ 
        background:#D5D5D5; 
        color:#333333; 
    } 
     
    #myTable tr{ 
        background:#F7F7F7; 
    } 
    #myTable tr th{ 
        height:20px; 
        padding:5px; 
    } 
    #myTable tr td{ 
        padding:5px; 
    } 
    </style> 
    <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20function%20%24(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20document.getElementById(obj)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20num%20%3D%200%3B%20%0D%0A%20%20%20%20function%20row(id)%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%20%0D%0A%20%20%20%20%20%20%20%20this.id%20%3D%20%24(id)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20row.prototype%20%3D%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E6%8F%92%E5%85%A5%E8%A1%8C%20%0D%0A%20%20%20%20%20%20%20%20insert%3Afunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20num%20%3D%20num%20%2B%201%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20newTr%20%3D%20this.id.insertRow(-1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20td_1%20%3D%20newTr.insertCell(0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20td_2%20%3D%20newTr.insertCell(1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20td_3%20%3D%20newTr.insertCell(2)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20td_1.innerHTML%20%3D%20num%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20td_2.innerHTML%20%3D%20%22%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%20www.glzy8.com%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20td_3.innerHTML%20%3D%20%22%3Cinput%20type%3D'button'%20onclick%3D'delRow(this)'%20value%3D'%E5%88%A0%E9%99%A4'%20%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%88%A0%E9%99%A4%E8%A1%8C%20%0D%0A%20%20%20%20%20%20%20%20del%3Afunction(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20i%20%3D%20obj.parentNode.parentNode.rowIndex%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20this.id.deleteRow(i)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%0D%0A%20%20%20%20function%20addRow()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20row2%20%3D%20new%20row(%22myTable%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20row2.insert()%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20function%20delRow(obj)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20var%20row1%20%3D%20new%20row(%22myTable%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20row1.del(obj)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20inputItem%3B%20%2F%2F%20%E8%BE%93%E5%85%A5%E6%A1%86%E5%8F%A5%E6%9F%84%20%0D%0A%20%20%20%20var%20activeItem%3B%20%2F%2F%20%E4%BF%9D%E5%AD%98%E6%AD%A3%E5%9C%A8%E7%BC%96%E8%BE%91%E7%9A%84%E5%8D%95%E5%85%83%E6%A0%BC%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E8%BD%AC%E6%88%90%E6%96%87%E6%9C%AC%20%0D%0A%20%20%20%20function%20changeToText(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(%20obj%20%26%26%20inputItem%20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%A6%82%E6%9E%9C%E5%AD%98%E5%9C%A8%E6%AD%A3%E5%9C%A8%E7%BC%96%E8%BE%91%E7%9A%84%E5%8D%95%E5%85%83%E6%A0%BC%EF%BC%8C%20%E5%88%99%E5%8F%96%E6%B6%88%E7%BC%96%E8%BE%91%E7%8A%B6%E6%80%81%EF%BC%8C%20%E5%B9%B6%E5%B0%86%E7%BC%96%E8%BE%91%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BF%9D%E5%AD%98%E8%B5%B7%E6%9D%A5%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20str%20%3D%20%22%20%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(inputItem.value%20!%3D%20%22%22)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20str%20%3D%20inputItem.value%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj.innerText%20%3D%20str%3B%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E8%BD%AC%E6%88%90%E7%BC%96%E8%BE%91%20%0D%0A%20%20%20%20function%20changeToEdit(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20if(%20!inputItem%20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem%20%3D%20document.createElement('input')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem.type%20%3D%20'text'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem.style.width%20%3D%20'100%25'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20inputItem.style.display%20%3D%20''%3B%20%0D%0A%20%20%20%20%20%20%20%20%20inputItem.value%20%3D%20obj.innerText%3B%20%2F%2F%20%E5%B0%86%E8%AF%A5%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E6%95%B0%E6%8D%AE%E6%96%87%E6%9C%AC%E8%AF%BB%E5%88%B0%E6%8E%A7%E4%BB%B6%E4%B8%8A%20%0D%0A%20%20%20%20%20%20%20%20%20obj.innerHTML%20%3D%20''%3B%20%2F%2F%20%E6%B8%85%E7%A9%BA%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E6%95%B0%E6%8D%AE%20%0D%0A%20%20%20%20%20%20%20%20%20obj.appendChild(inputItem)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20inputItem.focus()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20activeItem%20%3D%20obj%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E5%8F%8C%E5%87%BB%E6%97%B6%E6%96%87%E6%9C%AC%E5%8F%98%E6%88%90%E6%96%87%E6%9C%AC%E6%A1%86%20%0D%0A%20%20%20%20document.ondblclick%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(event.srcElement.tagName.toLowerCase()%20%3D%3D%20%22td%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!inputItem)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem%20%3D%20document.createElement(%22input%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem.type%20%3D%20%22text%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputItem.style.width%20%3D%20%22100%25%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20changeToText()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20changeToEdit(event.srcElement)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E5%8D%95%E5%87%BB%E6%97%B6%E6%96%87%E6%9C%AC%E6%A1%86%E5%8F%98%E6%88%90%E6%96%87%E6%9C%AC%20%0D%0A%20%20%20%20document.onclick%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(event.srcElement.parentNode%20%3D%3D%20activeItem%20%7C%7C%20event.srcElement%20%3D%3D%20activeItem)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%3B%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20changeToText(activeItem)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%3C%2Fscript%3E"> 
</head> 
<body> 
<input type="button" onclick="addRow()" value="插入一行" /> 
<table id="myTable" border="0" cellpadding="0" cellspacing="1"> 
<tr><th>编号</th><th>姓名</th><th>操作</th></tr> 
</table> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程