Question

我需要在<table>单元格中替换日期和短语，而不使用固定宽度。

<table>
   <thead>
      <tr><th>Date</th></tr>
   </thead>
   <tbody>
      <tr><td id='changethis'>Wed Dec 21 2011</td></tr>
   </tbody>
</table>

var hold = $('#changethis').text();
setInterval(function () { 
  if ($('#changethis').hasClass("highlight")) { 
    $('#changethis').text(hold);
    $('#changethis').removeClass("highlight");
  }
  else {
    $('#changethis').text(" E  R  R  O  R ");
    $('#changethis').addClass("highlight");
  }
},1000);

问题是每次文本交替时表重新格式化列的宽度。是否可以计算渲染文本宽度并调整交替文本？ JSbin Here

Answer 1

您可以尝试将宽度添加到元素

$('#changethis').width($('#changethis').width());

http://jsbin.com/ozunan/3/edit

Answer 2

计算渲染文字宽度：

$.fn.textWidth = function(){
    var sensor = $('<div />').css({margin: 0, padding: 0});
    $(this).append(sensor);
    var width = sensor.width();
    sensor.remove();
    return width;
};

你可以做其余的事情

如何使用完全相同长度的文本替换表格单元格中的文本？

2 个答案: