zoukankan      html  css  js  c++  java
  • jquery 关于table的子标签tbody

    <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    </table>

    上面是一段很简单的html代码,工作中用到了这样一个table

    <table>
    <tr><th>1</th></tr>
    <tbody></tbody>
    </table>
    

     我想通过jquery动态操作tbody的html();

    然后我写了这样的代码:

    1 var html = "<tr><td>我是tbody</td></tr>";
    2 
    3 $("table tbody").html(html);

    然后我发现页面变成了

    <table>
    <tr><td>我是tbody</td></tr>
    <tbody></tbody>
    </table>
    

     经过一番测试,发现用js获取table下tbody 通过table下的子元素tbody这种方式不一定会得到我们想要的结果。

    因为 table标签  默认会有一个tbody 这个tbody就是table下面所有的tr。

    所以当我们在table下没有写tbody或者thead的时候

    $("table tbody")就相当于$("table");
    如果我们在table下只写了tbody标签,并没有把所有的tr包含进去,那么$("table tbody")会获得与我们恰好相反的结果,也就是上面的代码,会把我们自己声明的tbody里的内容排除在外,取得table里面tbody外面的内容。

    好了!简单的问题。解决方案也很简单:
    <table>
    <thead><tr><th>head</th></tr></thead>
    <tbody><tr><td>body</td></tr></tbody>
    </table>
    

     不要偷懒,用标准的写法,将thead  tbody写全,就不会出问题了,妥妥儿的@@




  • 相关阅读:
    js键盘事件以及键盘事件拦截
    JavaScript 延迟加载
    二叉树深度优先 求二叉树最大深度
    css 小知识点:inline/inline-block/line-height
    es6 set
    CSS 水平垂直居中
    js 位运算符
    js 函数重载
    js之单例模式
    js 面向对象 ES5 AND ES6
  • 原文地址:https://www.cnblogs.com/xiejb/p/2550577.html
Copyright © 2011-2022 走看看