table動態修改表格內容
阿新 • • 發佈：2019-02-20
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>body{ width: auto;height: auto; } .inputOne { /* 去掉input預設邊框 */ outline: none; border:none; line-height: 33px; width: 100%;height: 100%; display: inline; background-color: #ffe9ac; } table{ font-weight: 600; } </style></head><body><table align="center" border="4" width="600" id="tt"><caption style="font-size: 30px"><b> 學生資訊情況 </b></caption><tr align="center" bgcolor="#e9967a"><td >姓名</td><td >民族</td><td>組別</td><td>出生年月</td><td>學校</td></tr><tr align="center" bgcolor="#fffaf0"><td ondblclick="change()" id="id1" >尹鵬程</td><td>漢族</td><td>第一組</td><td>1995.01</td><td>吉林醫藥學院</td></tr><tr align="center"><td>劉佳明</td><td>漢族</td><td>第一組</td><td>1995.02</td><td>吉林醫藥學院</td></tr><tr align="center"><td>徐玥</td><td>漢族</td><td>第一組</td><td>1995.03</td><td>吉林醫藥學院</td></tr><tr align="center"><td>杜俊良</td><td>漢族</td><td>第一組</td><td>1995.08</td><td>吉林醫藥學院</td></tr><tr align="center"><td>張偉</td><td>漢族</td><td>第一組</td><td>1995.01</td><td>吉林醫藥學院</td></tr><tr align="center" bgcolor="#fffaf0"><td>黃思婷</td><td>漢族</td><td>第二組</td><td>1995.04</td><td>吉林醫藥學院</td></tr><tr align="center"><td>滕之林</td><td>漢族</td><td>第二組</td><td>1997.01</td><td>吉林醫藥學院</td></tr><tr align="center"><td>丁林芳</td><td>漢族</td><td>第二組</td><td>1995.11</td><td>吉林醫藥學院</td></tr><tr align="center"><td>張炳霞</td><td>漢族</td><td>第二組</td><td>1995.07</td><td>吉林醫藥學院</td></tr><tr align="center"><td>鄭志勇</td><td>漢族</td><td>第二組</td><td>1995.06</td><td>吉林醫藥學院</td></tr><tr align="center" bgcolor="#fffaf0"><td>張恆</td><td>漢族</td><td>第三組</td><td>1997.01</td><td>吉林醫藥學院</td></tr><tr align="center"><td>張歡</td><td>漢族</td><td>第三組</td><td>1997.06</td><td>吉林醫藥學院</td></tr><tr align="center"><td>蔡傑</td><td>漢族</td><td>第三組</td><td>1995.08</td><td>吉林醫藥學院</td></tr><tr align="center"><td >王東旭</td><td>漢族</td><td>第三組</td><td>1995.08</td><td>吉林醫藥學院</td></tr></table><script src="../js/tablejs.js"></script></body>
</html>
js檔案
window.onload = function (e) { // 獲取所有的單元格 var td = document.getElementsByTagName("td"); for (var i = 0; i < td.length; i++) { td[i].index = i; td[i].onclick = function (e) { if (e.target.tagName.toLowerCase() == "td") { var input = document.createElement("input"); input.type = "text"; input.className = "inputOne"; input.value = this.innerHTML; td[this.index].innerHTML = ""; td[this.index].appendChild(input); input.focus(); input.onblur = function () { this.parentNode.innerHTML = input.value; input.remove(); } // 阻止冒泡 input.onclick = function (evt) { evt = evt || window.event; evt.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true; } } }; } }