JavaScriptでhtmlのTableをいじる

初めに

今回はjQueryをメインでDOM操作しながらTableをあれこれする方法を展開します。

コード

セルを押下できるようにする

セルを押下するとイベントが発火して処理される仕組み(今回はアラート表示)
まずはhtml側にTableをセットする(今回はタイトルなしです)

test.html

<table border="1">
        <tr>
            <td id="a"><a onclick="onClick(this);">Test1</a></td>
            <td id="b"><a onclick="onClick(this);">Test2</a></td>
            <td id="c"><a onclick="onClick(this);">Test3</a></td>
        </tr>
        <tr>
            <td id="d"><a onclick="onClick(this);">Test4</a></td>
            <td id="e"><a onclick="onClick(this);">Test5</a></td>
            <td id="f"><a onclick="onClick(this);">Test6</a></td>
        </tr>
    </table>

main.js

function onClick(link){
    alert("Test");
}

押下したセルの文字を入れ替え

main.js

function onClick(link){
    $(link).html("入れ替え")
}

押下したセルの文字を抽出

main.js

function onClick(link){
    $(link).parent().text()
}

押下したセルの列番号を抽出

main.js

function onClick(link){
    $(link).parent().index()
}

押下したセルのIDを抽出

idを振っている前提です

main.js

function onClick(link){
    $(link).parent().attr('id')
}

終わりに

今回はTableについての展開でした。
すごく簡単ですね！楽しい！