jQuery addClass 不工作

发布于 2024-07-30 04:24:36 字数 303 浏览 6 评论 0原文

我正在尝试使用 addClass 在 Joomla 模板上提供斑马条纹表格。 我使用以下代码:

 <script>
  jQuery(function($) {
    $("tr:odd").addClass("odd");
  });
</script>

我已经能够使用 tr:odd 选择器动态地将 css 添加到表行,但是当我使用 addClass 函数时,它却不能(我检查了生成的源代码,并且没有一个表行具有“奇数”类)。

不知道我可能做错了什么,希望得到任何帮助。

I'm trying to use addClass to give me zebra-striped tables on my Joomla template. Im using the following code:

 <script>
  jQuery(function($) {
    $("tr:odd").addClass("odd");
  });
</script>

I've been able to use the tr:odd selector to add css to table rows dynamically, but when i use the addClass function it just doesnt (I checked the source code produced and none of the table rows have the class "odd").

Havn't a clue what I could be doing wrong, would appreciate any help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

一袭白衣梦中忆 2024-08-06 04:24:37

所以您知道,当您查看源代码时,使用 Javascript 对 DOM 所做的更改不会反映出来。

如果你的 CSS 看起来像这样,那么该代码应该可以工作......

tr.odd td
{
    background:#070;
}

So you know, changes to the DOM with Javascript are not reflected when you view the source.

That code should work if your CSS looks like this...

tr.odd td
{
    background:#070;
}
白昼 2024-08-06 04:24:37

这里有两种创建斑马条纹的方式/方法,一种是使用 jQuery,一种是使用 CSS3。

第一种方法 - 使用 jQuery

HTML

要创建“条带”表,我们需要创建一个带有 id 的表来标识它并应用仅对该表添加样式,在本示例中,我们将其命名为“zebra_triped

<table id="zebra_triped" cellpadding="1" cellspacing="1" >
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
</table>

CSS

我们为偶数行创建一个样式,为偶数行创建另一个样式奇数行。

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }  
  table { background-color: white; width: 100%; }
  .oddRow { background-color:#ffcc00; } 
  .evenRow { background-color:#cccccc; }
</style>

jQuery

最后,我们需要创建将 CSS 类添加到 tr 标签的 jQuery 代码,这是通过以下代码实现的:

<script type="text/javascript">  
   $(document).ready(function() {  
   $("#stripedTable tr:odd").addClass("oddRow");  
   $("#stripedTable tr:even").addClass("evenRow");  
});  
</script>

第一行选择奇数 tr 标签在 id 为 zebra_triped 的元素内,并将它们添加到“oddRow”类,最后一行对偶数行执行相同的操作,将它们添加到“evenRow”类。

第二种方法 - 使用 CSS

** 我最喜欢的 :)*

HTML

<div id="comments">
    <h3>Comments</h3>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,.</p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
</div>

CSS

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }
  table { background-color: white; width: 100%; }
  #comments { margin-top: 21px; padding-top: 10px; border-top: 1px solid #d7d7d7; }
  #comments .comments_body { display: table; padding: 10px; }

   #comments .comments_body:nth-child(odd) {
    padding: 21px;
    background: #E3E3E3;
    border: 1px solid #d7d7d7;
   -moz-border-radius: 11px; // support FireFox which runs on Mozilla engine
   -webkit-border-radius: 11px; // support Safari and Chrome which they run on WebKit engine
   // as usual IE is behind and no support for it yet, unless you need to hack it using Java Script.
  }
</style>

< em>-moz-border-radius: 11px; 和 -webkit-border-radius: 11px;
在这里,我定义每个角的容器边框的半径/圆角。
这只是一行指定所有角的半径属性,但我可以按如下所示定位特定角:

- moz -border-radius-bottomleft:11px;
- moz -border-radius-bottomright:11px;
- moz -border-radius-topleft:11px;
- moz -border-radius-topright:11px;

希望

- webkit -border-radius-bottomleft:11px;
- webkit -border-radius-bottomright:11px;
- webkit -border-radius-topleft:11px;
- webkit -border-radius-topright:11px;

这会有所帮助,

艾哈迈德

here are two ways/methods to create zebra-striped, one way using jQuery and one way using CSS3.

First method– using jQuery

HTML

To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "zebra_triped"

<table id="zebra_triped" cellpadding="1" cellspacing="1" >
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
    </tr>
</table>

CSS

We create a style for the even rows and another for the odd rows.

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }  
  table { background-color: white; width: 100%; }
  .oddRow { background-color:#ffcc00; } 
  .evenRow { background-color:#cccccc; }
</style>

jQuery

Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:

<script type="text/javascript">  
   $(document).ready(function() {  
   $("#stripedTable tr:odd").addClass("oddRow");  
   $("#stripedTable tr:even").addClass("evenRow");  
});  
</script>

The first line selects the odd tr tags inside an element with the id zebra_triped and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".

Second method– using CSS

** My favorite :)*

HTML

<div id="comments">
    <h3>Comments</h3>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,.</p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
    <div class="comments_body">
        <header>By: <a href="#"> Lorem ipsum </a></header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
    </div>
</div>

CSS

<style type="text/css">
  html, body { font: 12px verdana; color: #333; }
  table { background-color: white; width: 100%; }
  #comments { margin-top: 21px; padding-top: 10px; border-top: 1px solid #d7d7d7; }
  #comments .comments_body { display: table; padding: 10px; }

   #comments .comments_body:nth-child(odd) {
    padding: 21px;
    background: #E3E3E3;
    border: 1px solid #d7d7d7;
   -moz-border-radius: 11px; // support FireFox which runs on Mozilla engine
   -webkit-border-radius: 11px; // support Safari and Chrome which they run on WebKit engine
   // as usual IE is behind and no support for it yet, unless you need to hack it using Java Script.
  }
</style>

-moz-border-radius: 11px; and -webkit-border-radius: 11px;
Here I’m defining the radius/round corner for the container’s border for each corner.
This is only one line specify the radius property for all corners, but I can target specific corner as below:

- moz -border-radius-bottomleft:11px;
- moz -border-radius-bottomright:11px;
- moz -border-radius-topleft:11px;
- moz -border-radius-topright:11px;

and

- webkit -border-radius-bottomleft:11px;
- webkit -border-radius-bottomright:11px;
- webkit -border-radius-topleft:11px;
- webkit -border-radius-topright:11px;

Hope this helps,

Ahmed

永不分离 2024-08-06 04:24:37

jQuery 不会更改 HTML 文档的源代码,它会更改 DOM 结构(文档在内存中的表示形式)。 要查看这些更改,您必须使用显示文档 DOM 的浏览器插件(Firefox 的 Firebug、IE 的开发人员工具 (F12))。

jQuery does not change source code of HTML document, it changes DOM structure (in-memory representation of document). To see these changes you have to use browser plug-in that shows DOM of document (Firebug for Firefox, Developers Tools (F12) for IE).

音盲 2024-08-06 04:24:37

尝试将类添加到 td 中,如下所示:

$("tr:odd td").addClass("odd");

Try adding the class to the td instead like this:

$("tr:odd td").addClass("odd");
眼眸里的那抹悲凉 2024-08-06 04:24:37
 $('table tr').each(function() {
    if ($(this).find('td').eq(6).text() === 'Start') {
        $(this).addClass('tooltip');
    }
 });
 $('table tr').each(function() {
    if ($(this).find('td').eq(6).text() === 'Start') {
        $(this).addClass('tooltip');
    }
 });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文