Question

我有一个包含以下行的表

        <table>
            <tr>
                <td><div>Suresh</div></td>
                <td><div>Ramesh</div></td>
                <td><div>Sachin</div></td>
            </tr>
            <tr>
                <td><div>Rahul</div></td>
                <td><div>Shiv</div></td>
                <td><div>Shyam</div></td>
            </tr>
             <tr>
                <td><div>Tandav</div></td>
                <td><div>Kiran</div></td>
                <td><div>Radha</div></td>
            </tr>
             <tr>
                <td><div>Pankaj</div></td>
                <td><div>Jiten</div></td>
                <td><div>Sandeep</div></td>
            </tr>
      </table>
    </div>

Css文件有

.coloradd
{
   background-color:orange;
}

我的Jquery如下

Check = function()
{

    $('tr').click(function(e){
        if(e.ctrlKey)
        {        
            $(this).addClass("coloradd");
        }
        else if(e.shiftKey)
        {
               //Code to be written to select multiples rows. 
        }
        else
        {
            $('tr').removeClass("coloradd");
            $(this).addClass("coloradd");
        }
    });

};

按下上面的jquery，当我按下控制键时，我可以选择多行，这些行将在背景颜色的帮助下显示。

但是当我选择一行并在Shift键的帮助下点击另一行时，我需要突出显示这两行之间的所有行（应该应用CSS）。有没有办法做到这一点？

Answer 1

if(e.shiftKey)
{
   // check previous selected row
   if( $('tr.coloradd:first').length == 1)
   {
     // okay, now check prev selected index
     var previndex = $('tr').index($('tr.coloradd:first'));

     // compare with current selected index
     var currindex = $('tr').index($(this));

     var startindex = previndex < currindex ? previndex : currindex;
     var stopindex = previndex > currindex ? previndex : currindex;

     $('tr').slice(startindex, stopindex + 1).addClass('coloradd');
   }
   else
   {
     $(this).addClass('coloradd'); // this is 1st selected row
   }
}

Answer 2

你需要找到两行之间的兄弟姐妹，然后循环通过那些兄弟姐妹来应用这个类。

你可能需要找到你最初点击的那个孩子在某个地方作为表中行的编号 - 然后找到你当前点击的行的编号然后你可以计算出中间的行。

Answer 3

当您选择第一行时，CSS类将应用于它。然后当按住shift并选择另一行时，您只需要查找具有coloradd CSS类的行，在该表的tr集合中获取它的位置或索引，获取索引或位置刚刚单击的行，切片jQuery集合只返回之间的行，然后将类添加到它们。

如何在jquery中存储以前单击的元素

3 个答案: