[jQuery] テーブルの1列目の<td></td>の中身を取得する方法

jQuery UIのSortable Tableでテーブルの順序を並び替え、その並び順をDBに登録したい場合、1列目に入力されているIDを並び順に取得する必要があります。

並び順をカンマ区切りデータで取得する方法を説明します。

XHTML
<table class="tbTest">
    <tbody>
        <tr>
            <td>1</td><td>太郎</td>
        </tr>
        <tr>
            <td>2</td><td>二郎</td>
        </tr>
        <tr>
            <td>3</td><td>三郎</td>
        </tr>
    </tbody>   
</table>
JavaScript
var itemIDs = '';
$('.tbTest tr').map(function () {
itemIDs += $(this).children('td:first').text() + ',';
});
alert(itemIDs);

クリックイベントでクリックしたテーブルのtrをmapメソッドで配列形式で取得します。

そこで、そのtrの中の最初のtdの値を取得するにはchildren(‘td:first’)というようにtd:firstを指定します。

これで1列目に入力されている値がカンマ区切りで行数分取得できます。取得したデータをAjaxでPHPに投げてDBを更新すればOK。



Author: webmaster