【发布时间】：2010-05-10 05:47:52
【问题描述】：
我的问题是在表格行上获得 onMouseover、onMouseout、onMousedown、onClick。我正在为此调用 javascript 用户定义函数。
onMouseover --- 背景颜色应该改变。 onMouseout --- 重置为原始颜色 onClick --- 应设置第一列复选框/单选按钮并更改背景颜色 onMousedown --- 背景颜色应该改变。
我的 html 代码是：-
<tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >
而javascripts中的方法是：-
var first_state = false;
var oldcol = '#ffffff'; var oldcol_cellarray = new Array();
函数悬停（元素）{
if (! element) element = this;
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.style.fontWeight != 'bold') {
for (var i = 0; i<element.cells.length; i++) {
if (element.cells[i].className != "no_hover") {
oldcol_cellarray[i] = element.cells[i].style.backgroundColor;
element.cells[i].style.backgroundColor='#e6f6f6';
}
}
}
}
// --------------------------------------------- --------------------------------------------------
函数 hover_out(元素) {
if (! element) element = this;
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.style.fontWeight != 'bold') {
for (var i = 0; i<element.cells.length; i++) {
if (element.cells[i].className != "no_hover") {
if (typeof oldcol_cellarray != undefined) {
element.cells[i].style.backgroundColor=oldcol_cellarray[i];
} else {
element.cells[i].style.backgroundColor='#ffffff';
}
//var oldcol_cellarray = new Array();
}
}
}
}
// --------------------------------------------- --------------------------------------------------
函数 get_first_state(元素) {
while (element.tagName != 'TR') {
element = element.parentNode;
}
first_state = element.cells[0].firstChild.checked;
}
// --------------------------------------------- --------------------------------------------------
function checkit（元素）{
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.cells[0].firstChild.type == 'radio') {
var typ = 0;
} else if (element.cells[0].firstChild.type == 'checkbox') {
typ = 1;
}
if (element.cells[0].firstChild.checked == true && typ == 1) {
if (element.cells[0].firstChild.checked == first_state) {
element.cells[0].firstChild.checked = false;
}
set_rowstyle(element, element.cells[0].firstChild.checked);
} else {
if (typ == 0 || element.cells[0].firstChild.checked == first_state) {
element.cells[0].firstChild.checked = true;
}
set_rowstyle(element, element.cells[0].firstChild.checked);
}
if (typ == 0) {
var table = element.parentNode;
if (table.tagName != "TABLE") {
table = table.parentNode;
}
if (table.tagName == "TABLE") {
table=table.tBodies[0].rows;
//var table = document.getElementById("js_tb").tBodies[0].rows;
for (var i = 1; i< table.length; i++) {
if (table[i].cells[0].firstChild.checked == true && table[i] != element) {
table[i].cells[0].firstChild.checked = false;
}
if (table[i].cells[0].firstChild.checked == false) {
set_rowstyle(table[i], false);
}
}
}
}
}
函数 set_rowstyle(r, on) {
if (on == true) {
for (var i =0; i < r.cells.length; i++) {
r.style.fontWeight = 'bold';
r.cells[i].style.backgroundColor = '#f2f2c2';
}
} else {
for ( i =0; i < r.cells.length; i++) {
r.style.fontWeight = 'normal';
r.cells[i].style.backgroundColor = '#ffffff';
}
}
}
它在 IE 中按预期工作。
但是来到 Firefox 后，我很惊讶看到这么多编码后的输出。
在 Firefox 中：-- onMouseOver 正在按预期工作。该特定行的颜色变化。
onClick -- 永久设置背景颜色..即使我在不同的行上执行 onmouseover。单击的上一行颜色不会重置为白色。 -- 不如预期
单击 2 行..设置两行的背景..只应设置最新的行颜色。之前选择的其他行应该被设置回来..不像预期的那样，即如果我点击所有行..所有内容的背景颜色都会改变...
即使我点击该行。第一列，即单选按钮或复选框未设置..
请帮我在 Firefox 中解决这个问题。请让我知道我的代码需要更改的地方...
提前致谢！！
【问题讨论】：
-
尝试使用 Firebug (getfirebug.com) 调试 javascript。
标签： javascript