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写全,就不会出问题了,妥妥儿的@@