虽然使用layui的表格很方便,但总归想挑战一下自己嘛,所以尝试了js的表格(写完之后觉得自己好sb,还在用各种超链实现换页,但愿能成为大家的参考)
<script type = 'text/javascript'>
var curRow; //全局行号
var curRowId; //选中行的记录信息的ID
var curColor;
function selectRow(tr){
if(curRow){
curRow.bgColor = curColor;
curColor = tr.bgColor;
tr.bgColor = "#FFE9B3";
}else{
curColor = tr.bgColor;
tr.bgColor = "FFE9B3";
}
curRow = tr;
curRowId = tr.id;
City(tr.cells[2].innerText);
}
function cellcity(city){
var tc=document.getElementById("tp");
var ROW = tc.rows.length ;
for(var i=1;i<ROW;i++){
if(tc.rows[i].cells[2].innerHTML==city){
tc.rows[i].bgColor = "#87CEFA";
}else{
tc.rows[i].bgColor = "#FFFFFF";
}
}
}
function cellpcity(city){
var tc=document.getElementById("tp");
var ROW = tc.rows.length ;
for(var i=1;i<ROW;i++){
if(tc.rows[i].cells[0].innerHTML==city){
tc.rows[i].bgColor = "#F0E68C";
}else{
tc.rows[i].bgColor = "#FFFFFF";
}
}
}
</script>
通过这些函数来构建动态表格,如果大家想引入jquery的话效果会更好
具体实现效果如下:


浙公网安备 33010602011771号