0

.see js bin

if i drag on minute 15 to 45 then name john having csstdgreen then i have i to make john block yellow. if i drag on minute 15 to 30 then jary having csstdgreen then i have i to make jary block yellow. i drag on minute 15 then jack having csstdgreen then i have i to make jack block yellow. only one at a time.How can i do that with jquery

i have shown an exmple here i have to do like this see demo

$(".csstdgreen").live('mousedown', function (e)
                {
                    //This line gets the index of the first clicked row.
                    lastRow = $(this).closest("tr")[0].rowIndex;
                    $(this).removeClass("csstdgreen").addClass("csstdyellow");
                    e.preventDefault();
                    return false;
                });
                $(document).live('mouseup', function () { flag = false; });
                $(".csstdgreen").live('mouseenter', function (e)
                {
                    // Compares with the last and next row index.
                    currentRow = $(this).closest("tr")[0].rowIndex;
                    if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
                    {
                        lastRow = $(this).closest("tr")[0].rowIndex;
                    } else
                        return;

                    if (flag)
                    {
                        $(this).children(":not(:first)").addClass("csstdyellow");
                        e.preventDefault();
                        flag = false;
                    }
                });
4

3 回答 3

1

所以你正在寻找这样的东西？

$('td').click(function() { // <-- on a td click
    if ($(this).hasClass('csstdgreen')) { // <-- check if current clicked element has this class
        $(this).css('background-color', 'yellow'); // <-- if it does the change background color
    }
});​

另外不要忘记将您的代码包装在一个 document.ready 函数中，以便它在尝试在 dom 中查找您的元素之前等待 dom 加载。 http://jsfiddle.net/64Byz/

于 2012-07-21T13:23:34.217 回答
0

你的代码是

<script type="text/javascript">
$(document).ready(function(){
    $(".csstr").click(function(){ 
        $(".csstr").removeClass('csstdyellow').addClass('csstdgreen');
        var current_cls = $(this).attr('rel');      
        $('.' + current_cls + ' > td').removeClass('csstdgreen');
        $('.' + current_cls).addClass('csstdyellow');
    });
});
</script>

我对您的 html 进行了一些更改以实现此目的。我为我们想要更改的每一行添加了额外的属性“rel”和额外的类。它强制“rel”值和添加的类名应该相同。例如，您想更改与“john”相关的所有行的颜色，那么您必须添加 rel="cls1" 和 class="cls1"（如果行中已经添加了另一个类，则添加新类，如 class="csstr cls1 “）在约翰的每一行。

<table border="1">
<tr class="csstr cls1" rel="cls1" >
<td class="csstdgreen">
    15

</td>
<td class="csstdgreen" rowspan="3">
    john
</td>
</tr>
<tr class="csstr cls1" rel="cls1">
<td class="csstdgreen">
    30
</td>
</tr>
<tr class="csstr cls1" rel="cls1">
<td class="csstdgreen "> 
    45
</td>
</tr>
    <tr  class="csstr cls2" rel="cls2">
      <td class="csstdgreen ">15</td>
      <td class="csstdgreen " rowspan="2">Jary</td>
    </tr>
      <tr class="csstr cls2" rel="cls2">
      <td class="csstdgreen ">30</td>      
    </tr>
     <tr class="csstr cls3" rel="cls3">
      <td class="csstdgreen">15</td>
      <td class="csstdgreen" rowspan="1">Jack</td>
    </tr>

</table>
于 2012-07-21T13:28:19.987 回答
0

我更改了您的 HTML，因为根据您给定的 HTML，我们无法实现您想要的...

我把javascript写成

  $(document).ready(function()
              {

                $('.csstdgreen').click(function(){
                 $('.csstdgreen').removeClass('csstdyellow'); 
                  $(this).closest('table').find('td').addClass("csstdyellow");
               });
       });

并且您使用 HTML 更新的代码已启用

http://jsbin.com/icaluy/36/edit#source

如果您想在鼠标悬停时发生这种情况，请按照此 jsBin

http://jsbin.com/icaluy/37/edit#preview

于 2012-07-21T13:56:34.010 回答