做了一个可编辑表格,但是表格双击之后会变大,求大神解答。
js代码
$(function() {
//找到所有名字的单元格
var name = $("table tr td");
//给这些单元格注册鼠标点击事件
name.click(function() {
//找到当前鼠标单击的td
var tdObj = $(this);
//保存原来的文本
var oldText = $(this).text();
//创建一个文本框
var inputObj = $("<input type='text' value='" + oldText + "'/>");
//去掉文本框的边框
//inputObj.size(100);
inputObj.css("border-width", 0);
//阻止文本框的点击事件
inputObj.click(function() {
return false;
});
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
inputObj.height(tdObj.height());
//去掉文本框的外边距
inputObj.css("margin",0);
inputObj.css("padding-right",0);
inputObj.css("text-align", "center");
inputObj.css("font-size", "16px");
//inputObj.css("background-color", tdObj.css("background-color"));
//把文本框放到td中
tdObj.html(inputObj);
//文本框失去焦点的时候变为文本
inputObj.blur(function() {
var newText = $(this).val();
tdObj.html(newText);
});
//全选
inputObj.trigger("focus").trigger("select");
});
});
css代码
table {
border:1px solid;
margin:70px 0px 0px 0px;
width: 1200px;
font-family: 微软雅黑;
border-collapse: collapse;
position:absolute;
}
table tr td{
border:1px solid;
}
table tr th,td{
border:1px solid;
width:80px;
}
table tr td input{
display:block;
padding:0;
margin:0;
border:0;
width:100%;
}
表格代码:
<table>
<tr>
<th>序</th>
<th>经理</th>
<th>CC</th>
<th>行业</th>
<th>省份</th>
<th>对应产品</th>
<th>对应子产品</th>
<th>项目编码</th>
<th>项目名称</th>
<th>工作内容</th>
<th>人员</th>
<th>人周</th>
</tr>
<tr>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
<td><div class="tddiv"> </div></td>
</tr>
</table>