您的位置：首页 > 其它

table动态修改表格内容

2017-11-28 14:26 381 查看 
<!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; }
}
};
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  table td 修改
相关文章推荐
新的分享
章节导航