使用正则批量替换单元格空白

在我们做table页面时可能都遇到过如果为table设定了大于0的边框border，当某个单元格中的内容未填充时在IE下浏览就会出现该单元格边框不显示的现象，这严重印象了表格界面的美观。我们一般使用填充 的方法来解决这个问题，但是如果我们一个个的手工填充似乎就显得有些麻烦了，当表格内容复杂时这种修改可能会是一个极大的工程。
  今天偶就想用js对这些替换进行批量的解决，首先想的的遍历单元格进行替换：

代码如下：

<script type="text/javascript">
  <!--
  function tdSpace(id){
    var doc=document.getElementById(id).getElementsByTagName("td");
    for(var i=doc.length;i>0;i--){
      if(/^\s*$/g.test(doc[i-1].innerHTML)){doc[i-1].innerHTML="&nbsp;";}
    }

  }
  window.onload=function(){
    var t1=new Date().getTime();
    tdSpace("test")
    alert("耗时："+(new Date().getTime()-t1)+"毫秒");
  }
  //-->
  </script>

 发现在表格数据很多时速度有些慢，对1800行<tr><td></td><td>xxxx</td></tr>的行进行替换需要1.5秒之多，毕竟这里使用循环变量，效率低是很正常的，于是开始想直接对整个表格进行搜索替换而不用循环来解决，思虑几分钟之后写出了如下代码：

<script type="text/javascript">
  <!--
  function tdSpace(id){
    var doc=document.getElementById(id);
    doc.outerHTML=doc.outerHTML.replace(/(<td[^>]*>)\s*(<\/td>)/ig,"$1&nbsp;$2");
  }
  window.onload=function(){
    var t1=new Date().getTime();
    tdSpace("test")
    alert("耗时："+(new Date().getTime()-t1)+"毫秒");
  }
  //-->
  </script>

执行了一下，效率的确提高了很多，和上面同样多的数据基本只需要60-70毫秒左右，这基本可以满足要求了。

考虑到只需要对ie做如上处理且在FF下不支持outerHTML的写法，再加上一个简单的浏览器判断搞定。

最终代码：

<script type="text/javascript">
  <!--
  function [color=#FF0000]tdSpace[/color](id){
    if(!document.all)return;
    var doc=document.getElementById(id);
    doc.outerHTML=doc.outerHTML.replace(/(<td[^>]*>)\s*(<\/td>)/ig,"$1&nbsp;$2");
  }
  window.onload=function(){
    var t1=new Date().getTime();
    tdSpace("test")
    alert("耗时："+(new Date().getTime()-t1)+"毫秒");
  }
  //-->
  </script>

在需要对表格内的单元格做空白处理时只需调用tdSpace即可，参数为table的id。

演示地址：http://ajaxbbs.net/test/replaceTdSpace.html