table动态修改表格内容

<!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  οndblclick="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动态修改表格内容相关推荐

js动态修改表格数据
js动态修改表格数据使用js在表格个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框 ...
Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...
android代码修改excel文件格式,Android实现类似execel的表格能回显并能修改表格内容的方法...
如下所示: 自定义实现一个水平滚动控件HorizontalScrollView package com.example.view; import android.content.Context; im ...
HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
android 如何制作可编辑的表格,Android实现类似execel的表格能回显并能修改表格内容的方法...
如下所示: 自定义实现一个水平滚动控件HorizontalScrollView package com.example.view; import android.content.Context; im ...
html 使table 页面居中,HTML网页中table居中和表格内容居中
HTML网页中table居中和表格内容居中 1.html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性: 居中:center:靠左:left:靠右:right. 2.在表 ...
Libre Office Calc 修改表格内容后边框变为红色
使用Libre Office Calc 过程中发现修改表格内容后边框会变为红色,如下图: 解决的方法: 编辑 -> 追踪修订 -> 记录更改
表格中添加input输入框，用于修改表格内容
如题,直接上代码 <td id="name" class="text-c modify"></td> $('.modify').clic ...
python xlutils教程_Python基于xlutils修改表格内容过程解析
一.xlutils是什么是一个提供了许多操作修改excel文件方法的库: 属于python的第三方模块 xlrd库用于读取excel文件中的数据,xlwt库用于将数据写入excel文件,修改用xlu ...

table动态修改表格内容

table动态修改表格内容相关推荐

最新文章

热门文章