Question

我有一个任务来制作一个可单击的表，当您单击某一行时，它变成绿色。我知道了，但现在我必须确保，当一行变成绿色时，计数器上升，而当其未单击时，计数器又需要下降。有人请帮助：P

 <style>
.green-cell {
   background: rgb(29, 247, 0); 
}
</style>


<body>

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table: <button id="clickme"> 0</button> </p>            
  <table class="table " id="onclick" >
    <thead>
      <tr >
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
        <td >John</td>
        <td>Doe</td>
        <td>1</td>
      </tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>2</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

  <script>
      $( function() {
    $('tr').click( function() {
    $(this).toggleClass("green-cell");



    count += 1;
    button.innerHTML =   count;



    } );
    } );

    var button = document.getElementById("clickme"),
     count = 0;
    button.onclick = function() {
    count += 1;
    button.innerHTML =   count;
};


    </script>

Answer 1

切换类后，您将检测该行当前是否具有该类，然后相应地更改计数。为此，您可以使用jQuery的.hasClass()方法。

演示：

$(function() {
  var countEl = $("#count");
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count++;
    } else {
      count--;
    }
    countEl.html(count);
  });
});

.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td, th {
  border: solid 1px #cccccc;
}

td, th {
  padding: 5px;
}

tr:hover {
  background: rgb(29, 247, 0);
}

tbody tr {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Count: <span id="count"> 0</span>
  <br/><br/>
  <table class="table " id="onclick">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>2</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

Answer 2

{
    "error": "access_denied",
    "error_description": "This application is not allowed to create application tokens"
}

Answer 3

<script>
    $(function() {
        var button = document.getElementById("clickme"),
        count = 0;

        $('tr').click( function() {
            if($(this).hasClass('green-cell') {
                count += 1
                $(this).removeClass('green-cell')
            }
            else {
                count -= 1
                $(this).addClass('green-cell')
            }

            button.innerHTML =   count;
        });
    });
</script>

当点击的计数器上升时，未点击的计数器再次下降时

3 个答案: