Как сохранить предыдущий элемент в jquery

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

при выборе первой строки к ней будет применен класс CSS. Затем, удерживая shift и выбирая другую строку, вам просто нужно найти строку, которая имеет класс coloradd CSS, получить ее позицию или индекс в коллекции tr для этой таблицы, просто получить индекс или позицию строки щелкнув, выделите коллекцию jQuery, чтобы получить только строки между ними, а затем добавьте к ним класс.

Answer 3

Вам нужно найти братьев и сестер между двумя строками, а затем просмотреть их, чтобы применить класс.

Вам, вероятно, нужно выяснить, на каком дочернем элементе вы изначально щелкнули, сохранить его где-нибудь как номер строки в таблице, а затем найти номер строки, по которой вы в данный момент щелкнули, и затем вы можете определить промежуточные строки.