テーブル内で空の要素をハイライトさせる

Ads

Result


動的に作られたテーブル向けになりそうです。空の要素がある行を削除、みたいな応用もできそう。

jQuery

$("td").each(function () {
        //空白かどうかを判断
        if ($(this).html().trim().length === 0) 
            //空白の箇所にclassを与える
            $(this).addClass('highlight');
    });

css

td {
    padding:6px;
    border: 1px solid #333;
}
th {
    padding:10px;
    font-weight:bold;
    border: 1px solid #333;
}
.highlight {
    background-color:yellow;
}

html

<table>
    <tr>
        <th>順番</th>
        <th>名前</th>
        <th>数</th>
        <th>金額</th>
    </tr>
    <tr>
        <td>1</td>
        <td>りんご</td>
        <td>10</td>
        <td>2000円</td>
    </tr>
  ・
  ・
  ・
</table>

via

http://jquerybyexample.blogspot.com/2012/11/jquery-to-highlight-empty-td-element-table.html
タイトルとURLをコピーしました