jquery+css实现可编辑表格table效果代码

代码语言:html

所属分类:表格

代码描述:jquery+css实现可编辑表格table效果代码,可以增加行、编辑修改表格内容。

代码标签: jquery css 可编辑 表格 table

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
    color: #484848;
    font-family:"微软雅黑"
}

/*各浏览器显示不同,去掉蓝色边框*/
fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
a{
text-decoration:none;
}
ul, ol {
    list-style: none;
}

input {outline:none;
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "微软雅黑";
}

/*去掉行内替换元素空白缝隙*/
select, input {
    vertical-align: middle;
}

/*去掉行内替换元素空白缝隙*/
img {
    border: 0;
    vertical-align: middle;
}

select, input, textarea {
    font-size: 14px;
    margin: 0;
}

/*防止拖动 影响布局*/
textarea {
    resize: none;
}

table {
    border-collapse: collapse;
}
tr{ border: none; }
td{ border: none; }
th{ border: none; }


.fl{ float: left; }
.fr{ float: right; }
.w100{ width: 98%;margin: 20px 1%; }
.content_mm{ float: left; width: 100%; }
.table_100{ width: 100%;border: none; }
.table_100 tr th{background: #0d94ff; color: #fff;border-right: 1px solid #fff; text-align: center;padding:15px; font-size: 14px;}
.table_100 tr td{ font-size: 14px; padding: 10px 5px; }
.text_align_c tr td{ text-align: center; }
.tex.........完整代码请登录后点击上方下载按钮下载查看

网友评论0