jquery动态添加tr和td到table中,想要点击td得到td对应的值怎么搞

jquery动态添加tr和td到table中,想要点击td得到td对应的值怎么搞,第1张

可以动态添加完之后,统一绑定事件

$("#tables td")click(function(){

    consolelog($(this)text())

})

亦可以每生成一个元素就绑定事件,不过这样你的html需要修改,改为循环插入td

js获取表格中每行的td元素方法:

<script>

var tb = documentgetElementById("tb");  //根据id找到这个表格

    var rows = tbrows;               //取得这个table下的所有行

    for(var i=0;i<rowslength;i++)//循环遍历所有的tr行

    {

      for(var j=0;j<rows[i]cellslength;j++)//取得第几行下面的td个数,再次循环遍历该行下面的td元素

      {

         var cell = rows[i]cells[j];//获取某行下面的某个td元素

       alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cellinnerHTML);//cellinnerHTML获取元素里头的值  

}

}

</script>

拓展使用jq几行命令就能实现获取td的值

$("#tb tr td")each(function(i, v){    //针对tb表格下的所有td进行遍历

        alert("第"+(i + 1)+"格的数字是"+$(this)text());//返回当前td下的值

})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

jQuery 中使用 text() 或者 html() 函数可以获取td的内容

$("td")text();   // 或者 $("td")html();

二者区别在于前者返回所选元素的文本内容,后者返回所选元素的内容(包括 HTML 标记)。

下面实例演示:点击按钮后获取所有选中行的td单元格的内容

1、HTML结构

<table id = "test">

    <tr><td><input type="checkbox" name="test"></td><td>1</td></tr>

    <tr><td><input type="checkbox" name="test"></td><td>4</td></tr>

    <tr><td><input type="checkbox" name="test"></td><td>7</td></tr>

    <tr><td><input type="checkbox" name="test"></td><td>10</td></tr>

</table>

<input type="button" value="确定">

2、jquery代码

$(function(){

    $(":button")click(function() {

        str = $(":checkbox:checked")map(function() {

            return $(this)parent()siblings('td')text();  // 根据checkbox定位到后面的td,然后使用text()函数获取内容

        })get()join(", ");   // 获取内容数组并拼接为字符串

        alert(str);   // 输出

    });

});

3、效果演示

documentgetElementById("logic_id")innerHTML;// td里有html元素的时候

documentgetElementById("logic_id")innerText;//td里只有字符的时候

documentgetElementById("logic_id")value();//这个td没有value这个参数你是获取不到的,除非你在<td value="xxx">这样你就能获取了,但是这种写法一般只用于input 输入框

一般只是普通字符不带html标签的你就使用innerText 就可以了。建议用innerText取纯数据

以上就是关于jquery动态添加tr和td到table中,想要点击td得到td对应的值怎么搞全部的内容,包括:jquery动态添加tr和td到table中,想要点击td得到td对应的值怎么搞、用javascript如何从tr中分别获得每个td的元素、我想通过一个for循环来得到不同TD的ID,该怎么写JS代码呢等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9800747.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存