鼠标移入移出事件、鼠标按下事件。。这还不简单吗。。给列加颜色 直接点就是用坐标来定位,记下每个TD的坐标,作为对象缓存起来。也可以用js的集合来定位
<html> <head> <title>table update</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var tempStr; //记录要变的值 $("td").mouseenter(function(){ //移入 var $this = $(this); tempStr = $this.text(); $this.text("(Apr)"); //变成(Apr) var t = $this.parents("table").get(0); var rows = t.rows; for(var i=0;i<rows.length;i++){ $(rows[i].cells[this.cellIndex]).css("background-color","#ABCDEF"); } }).mouseleave(function(){ //移出 var $this = $(this); $this.text(tempStr); //变回原来的值 var t = $this.parents("table").get(0); var rows = t.rows; for(var i=0;i<rows.length;i++){ $(rows[i].cells[this.cellIndex]).css("background-color","#FFFFFF"); } }).mousedown(function(){ $(this).html("up"); }).css("width","40px"); }); </script> </head> <body> <table border="1"> <tr> <td>00</td> <td>01</td> <td>02</td> <td>03</td> <td>04</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>30</td> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>40</td> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </table> </body> </html>
如果鼠标移动时,就把对应的单元格变为(Apr)怎么实现?当鼠标离开后,(Apr)又要变为原本的数字,求指点
@WhyShang: 你指的(Apr)是单纯的字符串?
你看我上面是不是有鼠标移入移出事件?移入的时候触发事件会把对应的TD传进来,就是this这个对象,移出去的以后改回来就行了。至于这个数值怎么存,简单点添加一个全局变量就行了。
楼上说不错,不过有个地方不对,鼠标按下 不是用click事件 而是 .mouseDown(function(){})
是的。mouseDown比较好。
代码说话:
$('tr td').mouseover(function(){ //鼠标进行事件 var $o=$(this);//将当前对象存为变量,用$o,$开头,是为了标识是Jq对象 $o.css('background-color','red'); //是否要还原其他td的背景色(可选) //$o.sublings().css('background-color','white'); }).mouseout(function(){ //鼠标离开事件 var $o=$(this); $o.css('background-color','white'); }).click(function(){ //鼠标点击事件 $(this).text('变化');//由于只有一个操作,就不用对象缓存了。 });
如果鼠标移动时,就把对应的单元格变为(Apr)怎么实现?当鼠标离开后,(Apr)又要变为原本的数字,求指点
@WhyShang: 可以用一个变量将原本的数字存储起来。
如楼上所言,应该将click改为mousedown,一开始直接看成点击了,哈哈。
<style type="text/css"> .tr-hover { background-color: red; } </style> <script src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function () { $("tr").hover(function () { $(this).addClass("tr-hover"); }, function () { $(this).removeClass("tr-hover"); }); $("td").dblclick(function () { var _this = $(this), _val = _this.html(); _this.empty(); $("<input>").val(_val).blur(function () { _this.empty().html($(this).val()); }).appendTo(this); }); }); </script>
如果鼠标移动时,就把对应的单元格变为(Apr)怎么实现?当鼠标离开后,(Apr)又要变为原本的数字,求指点
@WhyShang: 你先抽时间运行代码。