Выбор ячейки таблицы по диагонали, по горизонтали и по вертикали

Я пытаюсь создать простой код js для пользовательской таблицы поиска слов. Это первый раз, когда я делаю это, я заимствовал код, который я нашел в Интернете. Он работает неправильно, хотя я пытаюсь выбрать ячейку. Даже если вы попытаетесь сделать это по диагонали, горизонтально или вертикально. Первая и последняя ячейка выделения выделены (они имеют выделенный класс). Между ними нет.Выбор ячейки таблицы по диагонали, по горизонтали и по вертикали

Вот HTML код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset ="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>TABLE</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/styles.css" type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=latin,greek' rel='stylesheet' type='text/css'> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <script src="js/scripts.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="container"> 
       <div class="table-responsive"> 
        <table class=" table "> 
         <tbody> 
          <!-- First Row --> 
          <tr> 
           <td>P</td> 
           <td>U</td> 
           <td>Z</td> 
           <td>Z</td> 
           <td>L</td> 
           <td>I</td> 
           <td>N</td> 
           <td>G</td> 
          </tr> 
          <!-- Second Row --> 
          <tr> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
          </tr> 
          <!-- Third Row --> 
          <tr> 
           <td>I</td> 
           <td>A</td> 
           <td>R</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
          </tr> 
          <!-- Forth Row --> 
          <tr> 
           <td>N</td> 
           <td>A</td> 
           <td>A</td> 
           <td>Τ</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
           <td>A</td> 
          </tr> 
         </tbody>  
        </table>  
       </div> <!-- end of div.table--> 
      </div><!-- end of div.container--> 
     </div> 
    </body> 
</html>

Вот код CSS:

html { 
    font-size:14px ; 
    font-family: 'Roboto Condensed' ; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 


/*TABLE*/ 

.table { 
    text-align: center; 
    cursor:pointer; 
} 

.table > tbody > tr > td{ 
    padding: 25px; 
} 

.table > tbody > tr > td.highlighted { 
    background-color:#999; 
}

Вот код JS:

$(document).ready(function(){ 

    if($('.table').length){ 

     var $td = $('.table').find('td'); 
     var isMouseDown = false; 
     var isHighlighted; 

     $td.mousedown(function(){ 

      isMouseDown = true; 
      $(this).toggleClass("highlighted"); 
      isHighlighted = $(this).hasClass("highlighted"); 
      return false; 

     }).mouseup(function(){ 

      if (isMouseDown) { 
       $(this).toggleClass("highlighted", isHighlighted); 
      } 

     }).bind("selectstart", function() { 
      return false; 
     }); 

     $(document).mouseup(function(){ 
      isMouseDown = false; 
     });    

    } 

});

Для этого я с помощью чтобы обеспечить отзывчивость. Можете ли вы мне помочь?

источник

2015-08-05 Sergiti

укажите свой HTML код и связанных с CSS пожалуйста. спасибо – crazymatt

@crazymatt - Я бы сказал, что HTML и CSS неважны, и что включение HTML и CSS в вопрос только затушевывает соответствующий код. – gilly3

Ваш код не содержит ничего, что бы выбрать ячейки между ними. Единственное место в вашем коде, в котором ячейка могла быть выбрана, - это события и mouseup. Похоже, ваше намерение состоит в том, что пока мышь не работает, ячейки, на которые вы двигаете мышь, должны быть выделены. Затем сделать это в обработчике в mouseenter событий:

$(".table td").mouseenter(function() { 
    if (isMouseDown) { 
     $(this).toggleClass("highlighted"); 
    } 
});

Попробуйте здесь:

$(document).ready(function() { 
 
    if ($('.table').length) { 
 
    var $td = $('.table').find('td'); 
 
    var isMouseDown = false; 
 
    var isHighlighted; 
 

 
    $td.mousedown(function() { 
 
     isMouseDown = true; 
 
     $(this).toggleClass("highlighted"); 
 
     isHighlighted = $(this).hasClass("highlighted"); 
 
     return false; 
 
    }).mouseenter(function(){ 
 
     if (isMouseDown) { 
 
     $(this).toggleClass("highlighted"); 
 
     } 
 
    }).mouseup(function() { 
 
     if (isMouseDown) { 
 
     $(this).toggleClass("highlighted", isHighlighted); 
 
     } 
 
    }).on("selectstart", function() { 
 
     return false; 
 
    }); 
 

 
    $(document).mouseup(function() { 
 
     isMouseDown = false; 
 
    }); 
 
    } 
 
});

.highlighted { 
 
    background-color: navy; 
 
    color: #fff; 
 
} 
 
td { 
 
    width: 1em; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    <td>d</td> 
 
    <td>e</td> 
 
    <td>f</td> 
 
    </tr> 
 
    <tr> 
 
    <td>g</td> 
 
    <td>h</td> 
 
    <td>i</td> 
 
    <td>j</td> 
 
    <td>k</td> 
 
    <td>l</td> 
 
    </tr> 
 
    <tr> 
 
    <td>m</td> 
 
    <td>n</td> 
 
    <td>o</td> 
 
    <td>p</td> 
 
    <td>q</td> 
 
    <td>r</td> 
 
    </tr> 
 
</table>

источник

2015-08-05 22:58:26 gilly3

Что делать, если я хочу, чтобы это поведение было горизонтально, означает, что только когда я буду нажимать и перемещать мышь слева направо? – Madhav

@ Ma6139735 - Вы можете сохранить строку в обработчике mousedown, а затем добавить условие в обработчик 'mouseenter', который проверяет, находится ли эта ячейка в той же строке, что и ячейка в обработчике mousedown. – gilly3

извините, но мне это непонятно. :( – Madhav

Выбор ячейки таблицы по диагонали, по горизонтали и по вертикали

ответ

Смежные вопросы