向表中的某些单元格添加删除功能

时间:2016-01-10 20:54:02

标签: javascript jquery

我有一个函数可以根据用户输入文本框的数量创建一定数量的单元格。我试图得到它,以便当点击“Shade even Rows”按钮时,每个其他单元格都有一个直通线,但我没有运气。我觉得使用i%2 === 0是获得我希望放置直线的单元格的正确方法,但不确定要放入的具体参数。任何建议都会有所帮助!

$(document).ready(function() {
  $('#nbrTxt').focus();

  function addItem() {

    var value = $('#nbrTxt').val();
    var usrName = prompt("Name?");
    $('#buttons').append('<li><button class="shade">Shade Even Rows</button><button class="drkLine">Show Dark Line Every 10 Rows</button></li>')

    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();
      $('#nbrTxt').val("");
    };
  };
  $('#btnGo').click(addItem);

  $('#nbrTxt').keydown(function(e) {
    if (e.which === 13)
      addItem();
  })

  $(document).on('click', '.shade', function() {
    if (('#nbrTxt').val() % 2 === 0) {
      $(this).closest("tr").css('textDecoration' === 'iine-through');
    }
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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'>

  </div>

  <table id="table" width="500" border="1">
    <tr>
      <td>No. Count</td>
      <td>Name</td>
    </tr>
  </table>

</body>

</html>

1 个答案:

答案 0 :(得分:1)

.css('textDecoration' === 'iine-through');不是设置元素css属性的有效过程;见.css()

尝试使用:even选择器

$("tr:even").css("textDecoration", "line-through")