运用jquery实现table单双行不同显示并能单行选中

实现table单双行不同显示并能单行选中，可以结合使用CSS和jQuery来完成。

首先，为table中奇偶行分别添加不同的class名称。可以使用以下CSS代码：

tr:nth-child(odd) {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #ffffff;
}

以上代码使用了CSS3的:nth-child伪类，它能选择指定元素的父元素下第n个子元素，从而实现对奇偶行的样式控制。

接下来，为表格中的每一行绑定点击事件，实现单行选中效果。可以使用以下jQuery代码：

$('table tr').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});

以上代码使用了jQuery的click()方法，当用户点击任意一行时，当前行会被附加selected类，同时其他行会被移除selected类。

演示示例1

<!DOCTYPE html>
<html>
  <head>
    <style>
      tr:nth-child(odd) {
        background-color: #f2f2f2;
      }
      tr:nth-child(even) {
        background-color: #ffffff;
      }
      .selected {
        background-color: orange;
      }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('table tr').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected');
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>A</td>
      </tr>
      <tr>
        <td>2</td>
        <td>B</td>
      </tr>
      <tr>
        <td>3</td>
        <td>C</td>
      </tr>
      <tr>
        <td>4</td>
        <td>D</td>
      </tr>
    </table>
  </body>
</html>

演示示例2

可以扩展以上代码，在单行选中的同时，也将该行的数据绑定到一个表单中。可以使用以下代码：

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    var id = $(this).find('td:first').text();
    $('#id').val(id);
    var name = $(this).find('td:nth-child(2)').text();
    $('#name').val(name);
  });
});

以上代码使用了jQuery的on()方法，它可以为动态添加的元素绑定事件。在单击每一行时，会找到该行的第一个

元素和第二个

元素，分别将它们的文本值赋值给一个ID为"id"和"name"的表单元素。

演示示例2

<!DOCTYPE html>
<html>
  <head>
    <style>
      tr:nth-child(odd) {
        background-color: #f2f2f2;
      }
      tr:nth-child(even) {
        background-color: #ffffff;
      }
      .selected {
        background-color: orange;
      }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('table').on('click', 'tr', function() {
          $(this).addClass('selected').siblings().removeClass('selected');
          var id = $(this).find('td:first').text();
          $('#id').val(id);
          var name = $(this).find('td:nth-child(2)').text();
          $('#name').val(name);
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>A</td>
      </tr>
      <tr>
        <td>2</td>
        <td>B</td>
      </tr>
      <tr>
        <td>3</td>
        <td>C</td>
      </tr>
      <tr>
        <td>4</td>
        <td>D</td>
      </tr>
    </table>
    <form>
      <label>ID:</label><input type="text" id="id">
      <label>Name:</label><input type="text" id="name">
    </form>
  </body>
</html>

以上代码演示了如何将单击行时选中的行的数据绑定到一个表单中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：运用jquery实现table单双行不同显示并能单行选中 - Python技术站