你的位置:快乐忆站 \ 前端 \ 文章正文

表格中插入行的注意事项

做项目时找了一个多小时才找到的问题,在这里记录了跟大家分享下,希望能帮到大家。先看看demo,让大家看看效果,请猛戳下面链接:http://xiaosong.org/demo/table_insert_tips.html

用IE6/7测试下你就会发现,点击“插入一行”后无效,而其他标准浏览器都能顺利在表格中插入一行,这是什么原因呢?我贴出代码吧:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>IE6/7表格中插入行的注意事项</title>
  <link rel="stylesheet" href="http://css.cache.so/c/normalize.min.css">
  <style type="text/css">
    #wrap { width: 990px; margin: 50px auto; }
    #wrap table { width: 100%; table-layout: fixed; }
    #wrap table td { border: 1px solid #ccc; padding: 5px; }
    #btn { margin-top: 20px; text-align: center; }
    #btn { padding: 5px; }
  </style>
  <script type="text/javascript" src="http://js.cache.so/c/jquery.min.js"></script>
</head>
<body>
  <div id="wrap">
    <table id="J_Hook">
      <tr>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
      </tr>
      <tr>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
      </tr>
    </table>
    <div id="btn"><button>添加一行</button></div>
    <script type="text/tmpl" id="J_Tmpl">
      <tr>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
        <td>fuckIE6</td>
      </tr>
    </script>
  </div>
  <script type="text/javascript">
    $(function(){
      var _html = $('#J_Tmpl').html();
      $('#btn').find('button').bind('click', function(){
        $('#J_Hook').append(_html);
        return false;
      })
    })
  </script>
</body>
</html>

脚本应该没有多大的问题,那么问题出在哪里呢?公布答案之前我们先来看几个截图:

firefox

IEchrome

看到最后一张图大家应该清楚了,浏览器默认会给table加一层tbody,就是这个东西在搞鬼。下面看看点击后的几张截图:

firefox点击后chrome点击后

 这下应该看清楚了问题所在了,之所以chrome和firefox能显示是因为他们强大的容错能力!但是我们不能将错就错,更何况IE系列的点击还无效呢!

解决方案我想大家也应该有了吧?我说说我的吧,其实很简单,养成习惯,用table的时候记得下面套一层tbody就没啥事了,然后稍微修改下脚本:

//$('#J_Hook').append(_html);
$('#J_Hook').find('tbody').append(_html);

将原本直接插入表格的插入到新加的“tbody”中就解决问题了。

看看修复后的demo吧:http://xiaosong.org/demo/table_insert_tips_fix.html

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 23#
    Lutherbiavy
    Lutherbiavy 2017-10-30 15:18 回复
    清风DJ音乐网http://www.0715cw.com/
    人民币对美元汇率http://www.sxusa.net
    北京财经http://www.infonnet.com
    研究生招生信息网http://www.cyhzvj.cn
    搞笑大小王http://www.mtade.com/
    剧情吧http://www.2hhfr.com/
    十八届六中全会http://www.dmljj.com
    陆金所http://www.aosights.com
    美国神婆星座网http://www.pbgmv.com/
    长春财经http://www.infonnet.com
    王俊凯被央视采访http://www.Lkpj368.com
    全国企业信用信息公示系统http://www.sxusa.net
    百度指数http://www.zbsnews.com
    俄官员枪杀4军人http://www.aaespanoL.com
    小皮游戏http://www.kttrr.com/
    泰坦尼克家书天价http://www.abintra.net
    跑1300公里回家http://www.drkjj.com
    台大泼硫酸案http://www.eosmaiL.net
    蒂勒森突访阿富汗http://www.eosmaiL.net
    西甲直播http://bbs.dpmjj.com
  2. 22#
    FrankLew
    FrankLew Google Chrome 47.0.2526.111 Windows 8.1 x64 Edition 2017-06-19 11:37 回复
    unethost無限空間虛擬主機 技術分享部落格 http://blog.unethost.com/
  3. 21#
    hermes bucket bag
    hermes bucket bag Internet Explorer 6.0 Windows XP 2014-12-04 15:15 回复
    hermes online p?ckchenschein 快乐忆站
  4. 20#
    哈哈胡子
    哈哈胡子 Google Chrome 30.0.1599.101 Windows 8 x64 Edition 2013-10-24 10:50 回复
    以前也这么坑过自己,,看得感同身受啊
    小松
    小松 Google Chrome 30.0.1599.101 Windows 8.1 x64 Edition 2013-10-24 14:09 回复
    @哈哈胡子:
  5. 19#
    西门
    西门 Google Chrome 21.0.1180.89 Windows 7 x64 Edition 2012-09-19 23:44 回复
    你用Chrome看你那个DEMO,你插进去的tr和tbody是同级的,所以说这种写法本来就是错误的,不能怪浏览器
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-19 23:46 回复
    @西门:是啊,我有截图的,只是chrome容错了而已,罪魁祸首还是自己代码不规范导致的
  6. 18#
    西门
    西门 Google Chrome 21.0.1180.89 Windows 7 x64 Edition 2012-09-19 23:42 回复
    额,代码规范就是table里要有tbody,这不能怪浏览器
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-19 23:44 回复
    @西门:不怪浏览器,就是提醒大家,用table时做好写全
  7. 17#
    2nd丶骨頭
    2nd丶骨頭 Google Chrome 17.0.963.84 Windows XP 2012-09-19 09:55 回复
    哦哦,搜噶~  有学习啦~
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-19 10:17 回复
    @2nd丶骨頭:到时候出现问题突然想到在我这看到过,然后问题迎刃而解了,这才是我分享的目的~
    2nd丶骨頭
    2nd丶骨頭 Google Chrome 17.0.963.84 Windows XP 2012-09-19 15:04 回复
    @小松:o(∩_∩)o 哈哈~  我感觉这个问题我以后一定会碰到~  
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-19 18:56 回复
    @2nd丶骨頭:这么肯定啊,现在很少用table了,除非是一些后台系统
  8. 16#
    天猫主页
    天猫主页 Internet Explorer 8.0 Windows XP 2012-09-19 09:43 回复
    你真的懂好多啊,现目
  9. 15#
    老驴
    老驴 Firefox 15.0.1 Windows 7 x64 Edition 2012-09-18 23:32 回复
    这款主题好...有个性...
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-19 00:13 回复
    @老驴:就个性了点,其他基本没啥的
  10. 14#
    温碧泉八杯水
    温碧泉八杯水 Internet Explorer 8.0 Windows XP 2012-09-18 15:47 回复
    一般角本一个字母错就全完了
    小松
    小松 Google Chrome 23.0.1262.0 Windows 8 x64 Edition 2012-09-18 16:33 回复
    @温碧泉八杯水:那这是必须的~!
1 2 3

随机日志:

推荐日志:

彩色标签:

sitemap