Question

单击复选框时如何获取下一个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等。

Answer 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 Fiddle demo

参考文献：

Answer 2

我使用过jQuery。我猜这没关系？

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

http://jsfiddle.net/6Mwqz/

Answer 3

使用jQuery，会更好，这里是你的解决方案：

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

DEMO： http://jsfiddle.net/oscarj24/yYuzS/

在复选框上单击获取下一个td的内容

3 个答案: