qq_20960311 2015-10-27 09:18
浏览 1527

可编辑表格问题 jquery

做了一个可编辑表格,但是表格双击之后会变大,求大神解答。
图片说明
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">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                    <td><div class="tddiv">&nbsp;</div></td>
                </tr>
            </table>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥50 易语言把MYSQL数据库中的数据添加至组合框
    • ¥20 求数据集和代码#有偿答复
    • ¥15 关于下拉菜单选项关联的问题
    • ¥20 java-OJ-健康体检
    • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
    • ¥15 使用phpstudy在云服务器上搭建个人网站
    • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
    • ¥15 vue3+express部署到nginx
    • ¥20 搭建pt1000三线制高精度测温电路
    • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况