0

テーブルをループして各 TD 値を取得しようとしています。値が特定の数値を下回っている場合は、何かを行います。

     </head>
     <body>
     <table id="tableData" name="tableData">
     <tr>
     <td>abc</td>
     <td>5</td>
     <td>abcd</td>
     </tr>
     <tr>
     <td>aaaa</td>
     <td>15</td>
     <td>bbbb</td>
     </tr>
     <tr>
     <td>ccc</td>
     <td>25</td>
     <td>dddd</td>
     </tr>
     </table>
     </body>

上記は私のコードです..以下のように2列目の背景色を変更する必要があります。2 番目の列要素の値が <= 10 の場合、色は緑、11 ～ 20 は黄色、21 を超えると赤になります。ここにサンプルコードを示しました。実際には、テーブルはデータベースから派生したものであり、任意の数の行を持つことができます。そのため、ページが読み込まれるときに列に色を付ける必要があります。どんな助けでも大歓迎です、ありがとう。

4

4 に答える 4

1

次の変更されたプレーンな JavaScript は<td>、必要に応じて要素に色を付けます。

function checkForm() {
    var tds = document.querySelectorAll('td[id]');

    for (var j = 0; j < tds.length; j++) {
        var i = tds[j].innerHTML;

        if(i < 10){
            tds[j].style.backgroundColor = 'green'; 
        } else if(i >= 11 && i <= 20){
            tds[j].style.backgroundColor = 'yellow'; 
        } else if(i > 20){
            tds[j].style.backgroundColor = 'red';
        }
    }
}

ただし、一意の ID 値を指定するには、HTML を変更する必要があります<td>。たとえば、

<body onload="checkForm();">
    <table id="tableData" name="tableData">
        <tr>
            <td>abc</td>
            <td id="a">5</td>
            <td>abcd</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td id="b">15</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>ccc</td>
            <td id="c">25</td>
            <td>dddd</td>
        </tr>
    </table>
</body>

色が必要なのが常にid中央のセルである場合は、 s を完全に削除して、「常に中央のセル」であるという事実に依存することができます。たとえば、代わりに次のセレクターを使用します。

var tds = document.querySelectorAll('td:nth-child(2)');

唯一の制限は、querySelectorAllIE<9 ではサポートされていないことです。他のすべてのブラウザはそれをサポートしています。

を必要とするセルbackground-colorは常に 2 番目のセルであるため、CSS の nth-child セレクターを in の引数として使用して、 「親の 2 番目の子要素をquerySelectorAll()選択する」ことができます。この場合は.<td><tr>

したがって、次の HTMLtd:nth-child(2)の要素を検索します。<td>two</td>

<tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
</tr>

どのように機能するかのいくつかの例を参照してください:nth-child。

id-less ソリューションのデモ(色付けするセルが常に中央のセルの場合)。

:nth-childOP は IE8 でスタックしており、IE8 は代替の隣接兄弟コンビネータをサポートしていないため、2番目の子をターゲットにするために使用できますが、3 番目のみが存在<td>し、3番目には数字が含まれていてはならないという警告があります。

アップデート：

IE8 で作業し、6番目の列に追加する必要があるという実際の要件に基づいて、(読みやすく) よりシンプルでクロスブラウザー互換性の高い jQuery ソリューションを次に示します。background-color

jsBin デモ(IE8 で動作するように)

HTML

から削除onload="checkForm();します<body>

<table id="tableData" name="tableData">
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>abc</td>
        <td>5</td>
        <td>abcd</td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>aaaa</td>
        <td>15</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td>
        <td>ccc</td>
        <td>25</td>
        <td>dddd</td>
    </tr>
</table>

JavaScript

$(function(){
    var tds = $('td:nth-child(6)');

    for (var j = 0; j < tds.length; j++) {
        var i = tds[j].innerHTML;

        if(i < 10){
            tds[j].style.backgroundColor = 'green';
        } else if(i >= 11 && i <= 20){
            tds[j].style.backgroundColor = 'yellow';
        } else if(i > 20){
            tds[j].style.backgroundColor = 'red';
        }
    }
});
于 2013-05-24T07:37:20.243 に答える
1

まず、ページ上のどの要素にも同じ ID を使用しないでください。これは一意の識別子です。複数の要素を参照する場合は、代わりにクラスを使用してください。

必要なものを実現する最も簡単な方法は、2 つのクラスを使用することです。1 つは xxx を定義し、もう 1 つはそのステータス (色) を定義します。また、(.green、.yellow、.red の代わりに) セマンティックな名前付けを使用すると、コードをよく理解できます。

元

.xxx{ font-weight: bold;}
.less10 { background: green;}
.between1120 {background: yellow; }
.over21 { background: red; }

要素内のコンテンツによっては CSS を設定できません。このためには、いくつかの単純な jQuery/javascript または選択したプログラミング言語を使用して、テーブル内のすべての xxx クラスをループし、それに応じてステータス クラスを追加する必要があります。

元

<td class="xxx less10">5</td>
<td class="xxx between1120">15</td>
<td class="xxx over21">35</td>
于 2013-05-24T07:34:54.157 に答える
1

まず、ID xxx を Class xxx に変更する必要があります。

 function checkForm(){
    $('td.xxx').each(function(){
        var val=parseInt($(this).text());
        if(val<=10) $(this).css({background:'green'});
        else if(val>10 && val<=20) $(this).css({background:'yellow'});
        else if(val>20) $(this).css({background:'red'});
    }
 }

jQueryで動作するはずだと思います。

于 2013-05-24T07:36:00.500 に答える
0

ここにあなたが望むものがあります: デモはこちら</> 

 <table id="tableData" name="tableData">
    <tr>
        <td>
            abc
        </td>
        <td class="xxx">
            5
        </td>
        <td>
            abcd
        </td>
    </tr>
    <tr>
        <td>
            aaaa
        </td>
        <td class="xxx">
            15
        </td>
        <td>
            bbbb
        </td>
    </tr>
    <tr>
        <td>
            ccc
        </td>
        <td class="xxx">
            25
        </td>
        <td>
            dddd
        </td>
    </tr>
</table>

Javascript

$(document).ready(function () {
        var arr = $(".xxx").toArray();

        for (var i = 0; i < arr.length; i++) {

            if (parseInt(arr[i].innerText) < 10) {
                $(arr[i])[0].bgColor = "green";
            }

            else if (parseInt(arr[i].innerText) >= 11 && parseInt(arr[i].innerText) <= 20) {
                $(arr[i])[0].bgColor = 'yellow';
            }
            else if (parseInt(arr[i].innerText) > 20) {
                $(arr[i])[0].bgColor = 'red';
            }
        }

    });
于 2013-05-24T07:57:23.597 に答える