table的简单操作
程序员文章站
2022-07-14 12:25:55
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table的简单操作</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
/** table style **/
.table {
border: 1px solid #E0E0E0;
width: 100%;
font-size: 9pt;
border-collapse: collapse;
collsping: 0;
cellsping: 0;
}
.tdHead {
border: 1px solid #E0E0E0;
border-top: -1px solid #70A6F6;
background: #70A6F6;
height: 26px;
text-align: center;
font-size: 10pt;
font-weight: normal;
color: #000000;
vertical-align: middle;
cursor: hand;
filter: progid : DXImageTransform.Microsoft.Gradient (
GradientType = 0, StartColorStr = #70A6F6, EndColorStr =
#FFFFFF );
}
.tdHeadNo {
border: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
background: #3CA03C;
width: 40px;
text-align: center;
font-size: 10pt;
font-weight: normal;
color: #000000;
vertical-align: middle;
filter: progid : DXImageTransform.Microsoft.Gradient (
GradientType = 0, StartColorStr = #70A6F6, EndColorStr =
#FFFFFF );
}
.tdNo {
border: 1px solid #E0E0E0;
border-bottom: -1px solid #E0E0E0;
background: #70A6F6;
width: 40px;
height: 22px;
text-align: center;
font-size: 9pt;
font-weight: nomal;
color: #ffffff;
vertical-align: middle;
filter: progid : DXImageTransform.Microsoft.Gradient (
GradientType = 1, StartColorStr = #70A6F6, EndColorStr =
#FFFFFF );
}
.tdContent {
border: 1px solid #E0E0E0;
border-right: -1px solid #E0E0E0;
text-align: left;
font-size: 9pt;
color: #000000;
vertical-align: middle;
height: 22px;
CURSOR: hand;
}
.tdSelect {
border: 1px solid #E0E0E0;
border-right: -1px solid #E0E0E0;
background: #DDDDFF;
text-align: center;
font-size: 9pt;
color: #0000FF;
font-weight: normal;
vertical-align: middle;
filter: progid : DXImageTransform.Microsoft.Gradient (
GradientType = 0, StartColorStr = #FFFFFF, EndColorStr =
#DDDDFF );
height: 22px;
CURSOR: hand;
}
/** table style **/
</style>
<script type="text/javascript">
var selectRow = null;
function onSelect(el){
var tb = document.getElementById("table");
var row = null;
for(var i=1;i<tb.rows.length;i++){
row = tb.rows[i];
for(var j=0;j<row.cells.length;j++){
tb.rows[i].cells[j].className = "tdContent";
}
}
row = el.parentNode;
for(var i=0;i<row.cells.length;i++){
row.cells[i].className = "tdSelect";
}
selectRow = row;
}
function dbclick(obj){
onSelect(obj.cells[0]);
var id = selectRow.getAttribute("id");
alert(id);
}
</script>
</head>
<body>
<table class="table" border="1" style="width: 100%;" id="table">
<tr>
<td class="tdHeadNo" id="no" style="width: 4%" nowrap="nowrap">
序号
</td>
<td class="tdHead" id="FareBillCode" style="width: 10%;"
nowrap="nowrap">
单据编号
</td>
<td class="tdHead" id="DeptName" style="width: 10%;" nowrap="nowrap">
部门名称
</td>
</tr>
<tr id="35000000000001889" ondblclick="dbclick(this)">
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
1
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
200904200000
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
个体公司
</td>
</tr>
<tr id="35000000000001889" ondblclick="dbclick(this)">
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
2
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
200904250002
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
股份公司
</td>
</tr>
<tr id="35000000000001889" ondblclick="dbclick(this)">
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
3
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
200904200055
</td>
<td nowrap="nowrap" class="tdContent" onclick="onSelect(this)">
财务公司
</td>
</tr>
</table>
</body>
</html>