jQuery

jQuery table に含まれている要素を取得する

2014年5月20日

今回は jQuery で table に含まれている要素を取得してみます。

table の構造はセルであれば、table > tr > td と階層化しています。このため jQuery でこの階層を辿るには、$("table tr td 要素") のように記述します。
例えばセルの中に配置されているボタンを取得する場合、以下のようにセレクタを記述します。

$(function () {
    var buttons = $("table tr td input:button");
});

<table>
    <tr>
        <td>
            <input id="Button1" type="button" value="button" />
        </td>
        <td>
            <input id="Button2" type="button" value="button" />
        </td>
        <td>
            <input id="Button3" type="button" value="button" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="Button4" type="button" value="button" />
        </td>
        <td>
            <input id="Button5" type="button" value="button" />
        </td>
        <td>
            <input id="Button6" type="button" value="button" />
        </td>
    </tr>
</table>

-jQuery