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 回答