改写listTable样式，表格编辑更美观

chengdu_lifei

最近自己做个项目用到很多的表格编辑，由于对grid不熟悉，dataTable貌似只能展示数据？所以只好选择了listTable。
原来的样子长这样：


实在不太好看，我看着挺别扭，于是决定重新写一下样式
在CSS文件中粘贴
/**含有listTable的页面全局修改**/
input:FOCUS,select:FOCUS{
        background:rgba(255, 255, 255, 1) none repeat scroll !important;
    border-color: #2fa4e7;
    border-width: 1px;
    border-style: solid;
}
input,select{
        border-width: 1px;
    border-style: solid;
        height:30px;
        padding: 5px;
        border-color: transparent;
        border-radius: 0px;
        background:rgba(0, 0, 0, 0) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
        background:#ffffff; filter:Alpha(opacity=0);/*实现IE背景透明*/
        
}

label{
        margin-bottom:0px;
}
th{
        background-color: #f5f5f5;
        text-align: center;
}
.table-striped > tbody > tr:nth-of-type(odd) {
     background-color: #fff;
}
.table-striped > tbody > tr:nth-of-type(even) {
     background-color: #fafafa;
}
.table-striped > tbody > tr:HOVER {
     background-color: #e2eff8;
}
.table-striped > tbody > tr.selected {
     background-color: #c1ddf1;
}
.table-striped > tbody > tr>td {
     padding: 0px;

}-----------------------------------------------------------
js脚本：
行点击事件中添加代码：
$(".selected").removeClass("selected");
                $(event.currentTarget).addClass("selected");
然后就长这样了：


嗯，这样好看多了！

ilovethislinux

谢谢