javascript+css仿excel报表效果
日期：2014-05-17 浏览次数：20734 次
javascript+css仿excel表格效果
</script>
?
这是excel的界面，选中一个单元格后，该单元格，以及同行、同列的第一个单元格都呈现出特殊样式，很好地提示了用户。接下来用javascript和css实现类似效果。
关键的css如下：
?
css代码
td {
border-top:3px solid #FFFFFF;
border-bottom:2px solid #B3DE94;
padding:9px;
}
td.hover {/*选中的单元格*/
background-color:#595;
}
td.hover2 {/*同行同列的第一个单元格*/
background-color:#FFCC99;
}
border-top:3px solid #FFFFFF;
border-bottom:2px solid #B3DE94;
padding:9px;
}
td.hover {/*选中的单元格*/
background-color:#595;
}
td.hover2 {/*同行同列的第一个单元格*/
background-color:#FFCC99;
}
?
?
主要是背景颜色的不同。
?
然后用javascript循环遍历每一个单元格（不包括第一行和第一列的单元格），给它们添加鼠标经过和移出事件（当然和可以添加点击事件），然后给相关的单元格对象设定class值，鼠标移出时class设为“”就行了
?
javascript 写道
<script type="text/javascript">
var cells, len, tdRow, tdCol;
//保存单元格、单元格数组长度、同行，同列第一个单元格
window.onload = function() {
?cells = document.getElementsByTagName("td");
?len = cells.length;
?for (var i = 6; i<len; i++) {
??if (i%5 != 0) {
???cells[i].onmouseover = function() {
????this.className = "hover";
????for (var j = 6; j<len; j++) {
?????if (cells[j] == this) {
??????(tdRow=cells[j%5]).className = "hover2";
??????(tdCol=cells[j-j%5]).className = "hover2";
??????document.getElementById("position").innerHTML = "x:"+(j%5)+" y:"+Math.floor(j/5);
??????//Firefox浏览器貌似只支持innerHTML
??????break;
?????}
????}
???};
???cells[i].onmouseout = function() {
????this.className = "";
????tdRow.className = tdCol.className="";
????document.getElementById("position").innerHTML = "";
????//tdRow tdCol的存在就为了避免又一次的循环遍历
????/*for(var j=0;j<len;j++){
????if(cells[j]==this){
????cells[j%5].className="";
????cells[j-j%5].className="";
????break;
????}
????}*/
???};
??}
?}
};
//保存单元格、单元格数组长度、同行，同列第一个单元格
window.onload = function() {
?cells = document.getElementsByTagName("td");
?len = cells.length;
?for (var i = 6; i<len; i++) {
??if (i%5 != 0) {
???cells[i].onmouseover = function() {
????this.className = "hover";
????for (var j = 6; j<len; j++) {
?????if (cells[j] == this) {
??????(tdRow=cells[j%5]).className = "hover2";
??????(tdCol=cells[j-j%5]).className = "hover2";
??????document.getElementById("position").innerHTML = "x:"+(j%5)+" y:"+Math.floor(j/5);
??????//Firefox浏览器貌似只支持innerHTML
??????break;
?????}
????}
???};
???cells[i].onmouseout = function() {
????this.className = "";
????tdRow.className = tdCol.className="";
????document.getElementById("position").innerHTML = "";
????//tdRow tdCol的存在就为了避免又一次的循环遍历
????/*for(var j=0;j<len;j++){
????if(cells[j]==this){
????cells[j%5].className="";
????cells[j-j%5].className="";
????break;
????}
????}*/
???};
??}
?}
};
</script>
?
? 使用getElementsByTagName或getElementById取得属性，注意两个方法名称的区别：Elements的“s”
使用className属性动态设置元素的class
?
最后的效果如下：
?
?
经过测试Firefox和搜狗浏览器（IE）都拥有同样的效果
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
