0

tdチェックボックスをクリックしたときに次のコンテンツを取得する方法

<table>
    <tr>
        <td>
            <input type=checkbox name=t>
        </td>
        <td width=25%>
            FOOBAR
        </td>
        <td width=73%>
            BAZ
        </td>
    </tr>
    <tr>
        <td>
            <input type=checkbox name=t>
        </td>
        <td width=25%>
            FOO
        </td>
        <td width=73%>
            BAR
        </td>
    </tr>
</table>

私のJavaScriptコード：

var c=new Array();
c=window.document.getElementsByTagName('input');
for(var i=0;i<c.length;i++)
{
    if(c[i].type=='checkbox')
    {
        alert(c[i].parentNode.parentNode.rows[0].innerHTML);
    }
}

チェックボックスがクリックされたときに次のtdのコンテンツをフェッチしようとしています。最初の行については、FOOBARフェッチする必要があります。

編集

注意点：この質問に使用しているタグについてはかなり確信しています。たとえば、JSライブラリを指す回答は投稿しないでください。jQueryなど。

4

3 に答える 3

1

これはうまくいくようですが、HTMLに非常に依存しています（もちろん、DOMトラバーサルを含む多くのJavaScriptも同様です）。

var c = [];

c = window.document.getElementsByTagName('input');

for (var i = 0; i < c.length; i++) {
    if (c[i].type == 'checkbox') {
        c[i].onchange = function() {
            if (this.checked){
                console.log(this.parentNode.nextElementSibling.firstChild.nodeValue.trim());
            }
        };
    }
}​

JSフィドルデモ。

参照：

于 2012-04-26T19:53:24.383 に答える
0

私はjQueryを使用しました。大丈夫だと思いますか？

    ​$('input:checkbox').live('click', function() {
       alert($(this).parent().next('td').text());
    });​​​​​​​​​​​​​​​

http://jsfiddle.net/6Mwqz/

于 2012-04-26T19:46:58.780 に答える
0

jQueryを使用すると、より良いものになります。ここでのソリューションは次のとおりです。

$('[type=checkbox]').on('click', function(){
  var html;
  if($(this).is(':checked')) {
    html = $(this).parent().next('td').html();
    alert(html);
  }
});
​

デモ：http： //jsfiddle.net/oscarj24/yYuzS/

于 2012-04-26T19:58:04.487 に答える