addClass を使用して、Joomla テンプレートでゼブラ ストライプのテーブルを作成しようとしています。次のコードを使用しています：
<script>
jQuery(function($) {
$("tr:odd").addClass("odd");
});
</script>
tr:odd セレクターを使用して css をテーブル行に動的に追加することができましたが、 addClass 関数を使用すると、そうではありません (生成されたソース コードを確認したところ、どのテーブル行にも "odd" クラスが含まれていません)。 .
私が間違っている可能性のある手がかりがないので、助けていただければ幸いです。
ご存知のように、Javascript を使用した DOM への変更は、ソースを表示しても反映されません。
CSS が次のようになっている場合、そのコードは機能するはずです...
tr.odd td
{
background:#070;
}
ゼブラストライプを作成する2つの方法/方法があります。1つはjQueryを使用し、もう1つは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>
最初の行は、IDがzebra_tripedの要素内の奇数のtrタグを選択し、クラス「oddRow」を追加します。最後の行は、偶数の行と同じように、クラス「evenRow」を追加します。
2番目の方法–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>
--moz -border - radius：11px; および--webkit - border-radius：11px; ここでは、各コーナーのコンテナの境界の半径/丸いコーナーを定義しています。これは、すべてのコーナーのradiusプロパティを指定する1行だけですが、次のように特定のコーナーをターゲットにすることができます。
- 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;
お役に立てれば、
アーメド
jQuery は HTML ドキュメントのソース コードを変更するのではなく、DOM 構造 (ドキュメントのメモリ内表現) を変更します。これらの変更を確認するには、ドキュメントの DOM を表示するブラウザ プラグイン (Firefox では Firebug、IE では Developers Tools (F12)) を使用する必要があります。
td代わりに、次のようにクラスを追加してみてください。
$("tr:odd td").addClass("odd");
$('table tr').each(function() {
if ($(this).find('td').eq(6).text() === 'Start') {
$(this).addClass('tooltip');
}
});