0

ビジネス ロジックに基づいてテーブルの行の色を変更する必要があります。アクセスが制限されています。TD コンテンツを決定する PHP コードがあります...その TD から、現在の TR 背景色を変更する必要があります。

多くのトラバーサーとアクセサーがあるため、jQuery が役立ちます。

私が書いているコードは

<script type="text/javascript">$(this).closest("td").css("border", "1px solid red");</script>

しかし、現在の TD または TR にアクセスできません

4

4 に答える 4

2

thisを使用する代わりに、要素に id を指定し、jQuery を使用して取得します。あなたのコードでは、これは何も指していません。お気に入り：

<table><tr><td> <input id="myInput" type="text" /> </td></tr></table>

 //If you want to access the td
 $('#myInput').closest("td").css("border", "1px solid red");
 //If you want to access the tr
 $('#myInput').closest("tr").css("background", "red");
于 2012-12-10T11:29:41.743 に答える
0

ネストされたテーブルがあり、現在のTD属性を変更できないという最悪のケースを想定すると、次のようにその中に空のスパンを出力します。

<table>
<tr>
<td>Content 1
    <table>
    <tr>
        <td>Content 2<span data-class="very_important" /></td>
    </tr>
    </table>
</td>
</tr>
</table>

このように（最初または最後の）親TRにクラスを追加するよりも：

$(function() {
    $('span[data-class]').each(function(n) {
        var highlightClass = $(this).attr('data-class');
        $(this).parents('tr:first').addClass( highlightClass );
        $(this).remove(); /* Optional */
    });
});

これで、TRにクラスができ、TR（およびその子）を好きなようにスタイル設定できます。結果コード：

<table>
<tr>
    <td>Content 1
        <table>
        <tr class="very_important">
            <td>Content 2</td>
        </tr>
        </table>
    </td>
</tr>
</table>
于 2012-12-10T11:56:53.480 に答える
0

TD コンテンツまたは TD 自体をターゲットにする何らかの方法が必要です。コンテンツがユニークな場合は、キーワードまたはフレーズを検索できます。いずれにせよ、セレクターが必要です。$(this) は、ハンドラー内で一度 jquery オブジェクトへの参照にすぎません。

編集

私はそれについてもう少し考えました、そしてここにあなたが試すことができる何かがあります. コンテンツにしかアクセスできないので、UPDATEDのようなものを追加していただけますか? その場合、そのキーワードを追加し、jQuery を使用して境界線、背景に追加し、次のようにキーワードを削除できます。

​&lt;table cellpadding="5px" cellspacing="5px" border="1px">
    <tr><td>*UPDATED*Apple</td><td>Pie</td></tr>
    <tr><td>Orange</td><td>Crush</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

-

var $updatedContent = $('td:contains("*UPDATED*")');

$updatedContent.closest('td').css('border', '1px solid red').closest('tr').css('background','green');
$updatedContent.text($updatedContent.text().replace('*UPDATED*', ''));

</p>

于 2012-12-10T11:30:23.850 に答える
0

ここでは、parent() 関数を使用できます。

要素が $('#el') の場合、次のようにすると、最も近い td と tr が得られます

$('#el').parents('td').first();
$('#el').parents('tr').first();

次に、以下のような操作を適用できます

$('#el').parents('td').first().css("border", "1px solid red");
$('#el').parents('tr').first().css("border", "1px solid red");
于 2012-12-10T11:30:02.290 に答える