Question

我有一个函数可以对单元格中的每一行进行着色，但无法弄清楚如何获取它，这样当再次单击该按钮时，单元格将变为无阴影。我还希望不选择带行标题的第一行。任何想法将不胜感激！

＆＃13;

$(document).ready(function() {
  $('#nbrTxt').focus();

  function addItem() {

    var value = $('#nbrTxt').val();
    var usrName = prompt("Name?");


    for (var i = 1; i <= value; i++) {
      $('table').append('<tr><td></td><td></td></tr>');
      $('table tr:last td:first').html(i);
      $('table tr:last td:last').html(usrName);
      $(this).focus().select();
    };
  };
  $('#btnGo').click(addItem);

  $('#nbrTxt').keydown(function(e) {
    if (e.which === 13)
      addItem();
  })

  $(document).on('click', '#shade', function() {
    $('tr:even').css('background', '#A0A0A0');
  })

  $(document).on('click', '#drkLine', function() {
    if ($('#nbrTxt').val() % 10 === 0) {
      ($('#nbrTxt').val()).css('textDecoration', 'line-through');
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>

<html>

<head>

  <title>JQuery Selector</title>

  <style type="text/css">
    body {
      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    }
  </style>

  <script src="jquery-1.11.3.min.js"></script>
  <script src="jqueryselector.js"></script>

</head>

<body>

  <h1>JQuery Selector</h1>
  Enter Number:
  <input type="number" name="nbrTxt" id="nbrTxt" />
  <input type="button" value="GO" id="btnGo" />

  <div id='buttons'>
    <input type="button" value="Shade Even Rows" id="shade" />
    <input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
  </div>

  <table id="table" width="500" border="1">
    <tr>
      <td>No. Count</td>
      <td>Name</td>
    </tr>
  </table>

</body>

</html>

＆＃13;

Answer 1

在您的样式中添加课程shade并使用toggleClass()功能add/remove，请查看以下示例。

如果您不想选择第一行，可以使用:not(:first-child)：

$('tr:not(:first-child):even')

希望这有帮助。

段

＆＃13;

$(document).ready(function() {
  $('#nbrTxt').focus();

  function addItem() {

    var value = $('#nbrTxt').val();
    var usrName = prompt("Name?");

    $('table>tbody').empty();
    for (var i = 1; i <= value; i++) {
      $('table').append('<tr><td></td><td></td></tr>');
      $('table tr:last td:first').html(i);
      $('table tr:last td:last').html(usrName);
      $(this).focus().select();
    };
  };
  $('#btnGo').click(addItem);

  $('#nbrTxt').keydown(function(e) {
    if (e.which === 13)
      addItem();
  })

  $(document).on('click', '#shade', function() {
    $('tr:not(:first-child):even').toggleClass('shade');
  })

  $(document).on('click', '#drkLine', function() {
    if ($('#nbrTxt').val() % 10 === 0) {
      ($('#nbrTxt').val()).css('textDecoration', 'line-through');
    }
  })
});

＆＃13;

tr.shade{
   background: #A0A0A0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JQuery Selector</h1>
  Enter Number:
  <input type="number" name="nbrTxt" id="nbrTxt" />
  <input type="button" value="GO" id="btnGo" />

  <div id='buttons'>
    <input type="button" value="Shade Even Rows" id="shade" />
    <input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
  </div>

  <table id="table" width="500" border="1">
    <thead>      
      <tr>
          <td>No. Count</td>
          <td>Name</td>
      </tr>
    </thead>
  </table>

＆＃13;

单击按钮时在表格中着色单元格

1 个答案:

段