Question

我正在尝试为自定义单词搜索表创建一个简单的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;
         });            

    }   

});

为此，我正在使用boostrap，以便做出响应。你能帮帮我吗？

Answer 1

您的代码不包含任何可以选择其间的单元格的内容。代码中唯一可以选择单元格的地方是ggplot2和mousedown事件。听起来你的意图是当鼠标停止运转时，你移动鼠标的细胞应该突出显示。然后在mouseup事件处理程序中执行此操作：

mouseenter

在这里试试：

＆＃13;

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

＆＃13;

$(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;
    });
  }
});

＆＃13;

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

＆＃13;

表格单元格选择对角线，水平和垂直

1 个答案: