单击复选框时获取下一个TD的内容

Fetch content of next td on checkbox click

本文关键字：TD 下一个 复选框 获取 单击      更新时间：2023-09-26

单击复选框时如何获取下一个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的答案 图书馆例如。j查询等

这似乎有效，尽管它非常依赖于 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小提琴演示。

引用：

  • firstChild .
  • '下一个元素兄弟。
  • nodeValue .
  • parentNode .
  • trim() .

我用过jQuery。我猜没事吧？

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

http://jsfiddle.net/6Mwqz/

使用 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/

相关文章：