问题：

用jQuery插件给HTML行添加类？

万楷

2023-03-14

我有一个HTML格式的表，需要特别使用jQuery对其进行修改。我需要应用'header'类到主要行和‘偶数’和‘奇数’类到其他行的连续顺序。

因此，该表将在每一个连续行中有一个蓝色的主标题和浅灰色的背景行。我怎样才能做到这一点呢？我已经有了CSS，只需要弄清楚如何抓取这些行并添加类。您可以在附加的.js文件中看到我的尝试。我做错了什么？

null

"use strict";

// this JS file will call the plugin when the page loads

$(document).ready(function() {
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

null

"use strict";
// this is where jQuery goes

$(function(){
 $('#important tr:first-child').addClass('header');

  $("#important tr:not(header)").each(function(index) {
    $(this).addClass((index % 2) ? "even" : "odd");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Alternating Row Plugin</title>
    <link rel="stylesheet" href="altrow.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="jquery.altrow.js"></script>
    <script src="altrow.js"></script>
</head>
<body>
    <main>
      <h1>Important People in Computer Science</h1>
      <table id="important">
            <tr>
                <th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Accomplishment</th>
            </tr>
            <tr>
                <td>Charles</td><td>Babbage</td><td>12/26/1791</td>
                <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
            </tr>
            <tr>
                <td>Ada</td><td>Lovelace</td><td>12/10/1815</td>
                <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
            </tr>
            <tr>
                <td>Alan</td><td>Turing</td><td>6/23/1912</td>
                <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
            </tr>
            <tr>
                <td>Grace</td><td>Hopper</td><td>12/9/1906</td>
                <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
            </tr>
        </table>
    </main>
</body>
</html>

null

共有2个答案

经国安

2023-03-14

对于这个简单的任务，您不需要Javascript，您可以通过CSS将even或odd元素作为目标：

null

tbody tr:nth-child(even)  {
  background-color: pink;
}

tbody tr:nth-child(odd)  {
  background-color: green;
  color: white;
}

<main>
  <h1>Important People in Computer Science</h1>
  <table id="important">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Date of Birth</th>
        <th>Accomplishment</th>
      </tr>
      <thead>
        <tbody>
          <tr>
            <td>Charles</td>
            <td>Babbage</td>
            <td>12/26/1791</td>
            <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
          </tr>
          <tr>
            <td>Ada</td>
            <td>Lovelace</td>
            <td>12/10/1815</td>
            <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Turing</td>
            <td>6/23/1912</td>
            <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
          </tr>
          <tr>
            <td>Grace</td>
            <td>Hopper</td>
            <td>12/9/1906</td>
            <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
          </tr>
          <tbody>
  </table>
</main>

水昊阳

2023-03-14

正如所指出的，您不需要Javascript，您可以用CSS解决这一点。但是，由于您的问题特别要求使用Javascript，所以我将为您提供JS解决方案。首先，让我们修正一下你的错别字：

$('#important tr:first-child').addClass('header');

注意上面的大写c。

就在上面的线下面，做类似这样的事情

$("#important tr:not(header)").each(function(index) {
    $(this).addClass((index % 2) ? "even" : "odd");
});

完整解决方案：

null

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Alternating Row Plugin</title>
    <link rel="stylesheet" href="altrow.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="jquery.altrow.js"></script>
    <script src="altrow.js"></script>
    <style>
        .even {
            background-color: lightgray;
        }
        .odd {
            background-color: darkgray;
        }
        .header {
            background-color: lightblue;
        }
    </style>
    <script>
        $(function() {
            $('#important tr:first-child').addClass('header');
            $("#important tr:not(.header)").each(function(index) {
                $(this).addClass((index % 2) ? "even" : "odd");
            });
        });
    </script>
</head>
<body>
    <main>
      <h1>Important People in Computer Science</h1>
      <table id="important">
            <tr>
                <th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Accomplishment</th>
            </tr>
            <tr>
                <td>Charles</td><td>Babbage</td><td>12/26/1791</td>
                <td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
            </tr>
            <tr>
                <td>Ada</td><td>Lovelace</td><td>12/10/1815</td>
                <td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
            </tr>
            <tr>
                <td>Alan</td><td>Turing</td><td>6/23/1912</td>
                <td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
            </tr>
            <tr>
                <td>Grace</td><td>Hopper</td><td>12/9/1906</td>
                <td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
            </tr>
        </table>
    </main>
</body>
</html>

类似资料：

用jQuery添加CSS文件

问题内容：我正在创建一个popupwindow，我想向该popupwindow中添加一个css文件，下面是popupwindow的代码。我有创建一个popupwindow的JavaScript。现在，我想向该popupwindow中添加一个CSS文件。我尝试了类似的东西但不起作用。谢谢问题答案：这应该工作。
jQuery插件dataTables添加序号列的方法

本文向大家介绍jQuery插件dataTables添加序号列的方法，包括了jQuery插件dataTables添加序号列的方法的使用技巧和注意事项，需要的朋友参考一下官网方法实例：试了一下，然后发现会报draw方法找不到之类的，可能是因为版本问题，用的是1.12.10版本的。所以又发现有热心网友分享一下方法，是可以的。定义{"data": null,"targets": 0},一个空列，然
创建html文件并动态添加行

我想使用java创建log.html文件，当错误被捕获时，我会将错误转储到html table-row中。我创建了表列，但是当我向它传递任何内容时，我的数据会覆盖列名而不是附加行。我的java代码如下：以下是writetofile方法：
使用jquery给指定的table动态添加一行、删除一行

本文向大家介绍使用jquery给指定的table动态添加一行、删除一行，包括了使用jquery给指定的table动态添加一行、删除一行的使用技巧和注意事项，需要的朋友参考一下需求场景 1）、添加一行支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。前提条件：行数需在表中存在否则添加不成功。 2）、删除一行支
jQuery给表格添加分页效果

本文向大家介绍jQuery给表格添加分页效果，包括了jQuery给表格添加分页效果的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了jQuery表格添加分页的具体代码，供大家参考，具体内容如下 1. 新建一个Table，添加十行数据 2. 引入jQuery 及script代码 3. 另外，附上表格和底部分页码的css样式 4.好了，打开浏览器试试点击页码可翻页，成功！更多精彩内容请
使用JavaScript/jQuery[closed]在Div内部添加HTML表

我有以下:- 并且我想在div之间添加以下HTML表：- 所以我有以下两个问题：- > 如何根据以开头、以结尾的id选择Div？另外，在选择Div之后，我如何在它之间添加HTML表？> 谢谢

用jQuery插件给HTML行添加类？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档