李思阳的回答：两个明显的问题 (1)未看见引入了jquery. (2)未定义单击事件. 改成以下代码.我自己测试通过(点击单元格更改class). ============== hotdigger的是整个表格一起改了。要改的是单元格。 ==================== 改成以下代码,即可以改变单个单元格的样式. <html> <head> <title> demo form juqery </title> <script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function change_bg(td_obj){ if($(td_obj).attr("className") == '0'){ $(td_obj).removeClass('0').addClass('1'); }else{ $(td_obj).removeClass('1').addClass('0'); } } </script> <STYLE type="text/css"> table { border-collapse: collapse; } .0 { background-color: #FFFFFF;} .1 { background-color: #FFE699;} </STYLE> </head> <body> <TABLE border="1" bordercolor="#FF8800" id="tableid" > <TR ><TD class="0" onclick="change_bg(this)">XXXXXX</TD><TD class="0" onclick="change_bg(this)">XXXXXX</TD></TR> <TR ><TD class="0" onclick="change_bg(this)">XXXXXX</TD><TD class="0" onclick="change_bg(this)">XXXXXX</TD></TR> </TABLE> </body> </html> ========================= 另最重要的是要能保存。不然一刷新就全部复原了。 ================ 如果要保存的话,那你自己写AJAX保存到数据库吧.单纯的JS控制是不能保存的. 李国辉的回答：两个明显的问题 (1)未看见引入了jquery. (2)未定义单击事件. 改成以下代码.我自己测试通过(点击单元格更改class). ============== hotdigger的是整个表格一起改了。要改的是单元格。 ==================== 改成以下代码,即可以改变单个单元格的样式. <html> <head> <title> demo form juqery </title> <script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function change_bg(td_obj){ if($(td_obj).attr("className") == '0'){ $(td_obj).removeClass('0').addClass('1'); }else{ $(td_obj).removeClass('1').addClass('0'); } } </script> <STYLE type="text/css"> table { border-collapse: collapse; } .0 { background-color: #FFFFFF;} .1 { background-color: #FFE699;} </STYLE> </head> <body> <TABLE border="1" bordercolor="#FF8800" id="tableid" > <TR ><TD class="0" onclick="change_bg(this)">XXXXXX</TD><TD class="0" onclick="change_bg(this)">XXXXXX</TD></TR> <TR ><TD class="0" onclick="change_bg(this)">XXXXXX</TD><TD class="0" onclick="change_bg(this)">XXXXXX</TD></TR> </TABLE> </body> </html> ========================= 另最重要的是要能保存。不然一刷新就全部复原了。 ================ 如果要保存的话,那你自己写AJAX保存到数据库吧.单纯的JS控制是不能保存的. 丁文钧的回答：<HTML> <HEAD> <script src="jquery-1[1].3.1.js" type="text/javascript" language="javascript"></script> <STYLE type="text/css"> table { border-collapse: collapse; } .0 { background-color: #FFFFFF;} .1 { background-color: #FFE699;} </STYLE> <script type="text/javascript"> $(function(){ $(".0").click(function(){ $("#tableid td").removeClass("1").addClass("0"); $(this).addClass("1"); }); }); </script> </HEAD> <BODY> <TABLE border="1" bordercolor="#FF8800" id="tableid"> <TR><TD class="0">XXXXXX</TD><TD class="0">XXXXXX</TD></TR> <TR><TD class="0">XXXXXX</TD><TD class="0">XXXXXX</TD></TR> <TR><TD class="0">XXXXXX</TD><TD class="0">XXXXXX</TD></TR> </TABLE> </BODY> </HTML> 这样就行了 胡博轩的回答：很明显jquery库就没引入嘛。。 去下个jquery放里面就好了。 陈嘉陵的回答：children()方法：只考虑子元素而不考虑所有后代元素 $(table_id).children('td')筛选出来的节点长度是空的，可以这样写: <script type="text/javascript"> var table_id = "#tableid"; $(document).ready(function(){ var obj = $(table_id).find('td') obj .removeClass('1').addClass('0'); obj.click(function(){ $(this).addClass('1'); }); }); </script> |
