jquery怎么得到table表格tr下所有td

  • 原创
  • |
  • 浏览:3989
  • |
  • 更新:
  • |
  • 标签:JQUERY 

在jquery中,获得table表格内所有td,可以直接通过td元素名称获得对象的集合,便可使用jquery方法对所有的td进行操作了。下面小编以获得所有td的内容为例,讲解jquery怎么得到table表格tr下所有td。

jquery怎么得到table表格tr下所有td

工具/原料

  • html+jquery
  • 代码编辑器:Dreamweaver CS5

方法/步骤

  1. 1

    新建一个html文件,命名为test.html,用于讲解jquery怎么得到table表格tr下所有td。

    jquery怎么得到table表格tr下所有td
  2. 2

    在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。

    jquery怎么得到table表格tr下所有td
  3. 3

    在test.html文件中,使用table、td、tr标签创建一个两行两列的表格,为了展示效果,这里设置表格边框为1px。

    jquery怎么得到table表格tr下所有td
  4. 4

    在test.html文件内,使用button标签创建一个按钮,按钮名称为“获得所有td内容”。

    jquery怎么得到table表格tr下所有td
  5. 4
    此文章未经许可获取自百度经验
  6. 5

    在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getalltd()函数。

    jquery怎么得到table表格tr下所有td
  7. 6

    在js标签中,创建getalltd()函数,在函数内,通过元素名称(td)获得td对象,即获得了表格中所有的td对象,然后再使用text()方法获得td的内容。最后,使用alert()方法输出所有td的内容。

    jquery怎么得到table表格tr下所有td
  8. 7

    在浏览器打开test.html文件,点击按钮,查看实现的效果。

    jquery怎么得到table表格tr下所有td
    END

总结:

  1. 1

    1、创建一个test.html文件。

     

    2、在文件内,使用table、td、tr标签创建一个两行两列的表格,同时使用button标签创建一个按钮,用于触发执行js函数。

     

    3、在js标签内,创建函数,在函数内,通过元素名称获得td对象,再使用text()方法获得td的内容。

    END

注意事项

  • 若需要获得部分的td元素,可以给td元素设置class属性来实现。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签JQUERY