单击单元格实现可编辑的表格(学号和姓名下)

编辑完成后按Enter确定,Esc取消

<!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>JQuery下单击行实现可编辑的表格</title>
<style type="text/css">
table
{
border:1px solid black;
border-collapse:collapse;
width:300px;
}
table th
{
border:1px solid black;
width:50px;
}
table td
{
border:1px solid black;
width:50px;
}
tbody th
{
background-color:Highlight;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('tbody tr:even').css("background-color", "silver"); //设置奇数行背景为灰色
//给单元格注册鼠标单击事件
$('tbody td').click(function () {
var tdobj = $(this); //获得单击的单元格
//移除文本框的相应点击事件,因为会给td照成影响
if (tdobj.children('input').length > 0) {
return false;
}
var tdtext = $(this).html(); // 获得该单元格的内容
tdobj.html(""); //清空该单元格
var inputobj = $("<input type='text' />").css("border-width", "0px")//创建一个无边框文本框
.css("font-size", "15px")//设置文本框的背景字体大小
.width("50px")//设置文本框的大小
.css("background-color", tdobj.css("background-color"))//设置文本框的背景色为当前选中td的背景色
.val(tdtext)//设置文本框为该单元格的内容
.appendTo(tdobj); //将文本框追加到td中
inputobj.trigger("focus").trigger("select"); //先触发聚焦再触发选中(考虑到浏览器兼容性)
//给文本框注册Enter和ESC按键的操作
inputobj.keyup(function (event) {
var keynode = event.which; //获得当前按下键盘的键值
//当选择Enter的情况
if (keynode == "13") {
tdobj.html($(this).val());//保存编辑内容
}
//当选择ESC的情况
if (keynode == "27") {
tdobj.html(tdtext);//取消时设置为鼠标点击时的值
}
});
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>葛键</td>
</tr>
<tr>
<td>000002</td>
<td>张洁</td>
</tr>
<tr>
<td>000003</td>
<td>迎春</td>
</tr>
<tr>
<td>000004</td>
<td>振威</td>
</tr>
</tbody>
</table>
</body>
</html>

单击单元格实现可编辑的表格(学号和姓名下)相关推荐

ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
一个表格,一部分允许编辑,有公式的单元格不允许编辑
1.全选你工作表中的内容,再选菜单栏中的格式项下的"单元格"项. 2.去掉勾选"保护"项内的"锁定,之后"确定"退出. 3.选定你 ...
在EXCEL表格中经常会遇到有合并单元格时，汇总计算的公式无法直接下拉自动填充计算，掌握这个小技巧一键汇总
在EXCEL表格中经常会遇到有合并单元格时,汇总计算的公式无法直接下拉自动填充计算,掌握这个小技巧一键汇总目录在EXCEL表格中经常会遇到有合并单元格时,汇总计算的公式无法直接下拉自动填充计算,掌 ...
套用带标题行的表格样式_excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果...
excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教 ...
ppwjs之bootstrap表格：String.到表头单元格元素和 String.到表格单元格元素
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPT html> <html><head><meta http-equ ...
html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程
今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解决办法:先用noWrap令文字不换行,再用style=table-layout:fixed ...
ExtJS EditorGridPanel 控制每一个单元格是否可以编辑
//loginUser 为当前登录人 //loginUser = '6651'; Ext.onReady(function() { Ext.QuickTips.init(); //空或零返回 tru ...
SALV25 开启单元格级别的编辑模式
==> 参考(前置条件) SAP SALV15 增强SALV使SALV支持列级别.行级别.单元格级别的编辑模式切换 Editable CL_SALV_TABLE after release 75 ...
html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等
需求在el-table中想要直接点击单元格直接由文字显示变为编辑框状态,而非一整行编辑或者通过展示模态框编辑,这样目标性会比较清楚且页面较简洁.下面直接上代码! 实现效果 html代码 @blur= ...

单击单元格实现可编辑的表格(学号和姓名下)

单击单元格实现可编辑的表格(学号和姓名下)

编辑完成后按Enter确定,Esc取消

单击单元格实现可编辑的表格(学号和姓名下)相关推荐

最新文章

热门文章