0

我想保持元素相同的大小和元素内的替代文本。文本和替代文本可以是任意长度。我目前通过猜测文本将在元素中的长度来截断替代文本（但不考虑可能具有多行的原始文本）。如果一切都是单行并且用户不调整窗口大小，它可以正常工作。 $(window).resize(findCELLSIZE);触发太频繁（每次我替换元素时），所以我没有使用它来重新计算宽度和高度。

我有 HTML（简化）为：

<table id='main'>
   <thead>
     <th width='100'>first</th>
     <th>second</th>
     <th width='100'>third</th>
   </thead>
   <tbody>
     <tr>
       <td>Blah</td>
       <td class='special' data-text="<span class='highlight'>different BLAH1</span>,.,<span class='highlight2'>short BLAH2</span>">Blah Blah</td>
       <td>Blah</td>
   </tbody>
</table>

使用简化的 jQuery/javascript 为：

var DESCRIPTIONheight = [];
var DESCRIPTIONwidth = 0;
function findCELLSIZE () {
   $("#main tbody tr").each(function() { 
       var thatwidth = $(this).find('td:nth-child(2)').width();
       if (thatwidth >= DESCRIPTIONwidth) { DESCRIPTIONwidth = thatwidth+1; }
   });
   $(".special").each(function () {
       $(this).closest('tr').height('');
       DESCRIPTIONheight.push($(this).height()+1);
   });
}
findCELLSIZE();
//$(window).resize(findCELLSIZE);
function flashEXPRESS() {
    $(".special").each(function (index) {
      var next = $(this).data('text').split(/,\.,/)[0];
      var temp = '';
      if (next != $(this).data('text')) {
         temp = $(this).data('text').split(/^(.+?),\.,/)[0] +',.,';
      }
      temp = temp + $(this).html();
      var mytextlength = next.match(/>(.*?)<\/span>$/i);
      if(mytextlength) {
         if (mytextlength[1].length*7 > DESCRIPTIONwidth) { 
           mytextlength[1] = mytextlength[1].substring(0,Math.floor(DESCRIPTIONwidth/7));
           next = next.replace(/>(.*?)<\/span>$/i,'>'+mytextlength[1]+'</span>');
         }
      }
      $(this).html(next);
      $(this).width(DESCRIPTIONwidth);
      $(this).data('text', temp);
      $(this).closest('tr').height(DESCRIPTIONheight[index]);
   });
}
var flashEXPRESSid = 0;
flashEXPRESSid = setInterval(flashEXPRESS,1000);

这是一个小提琴我的代码在 IE8 中运行，但不是 Firefox 15（jQuery 写入 html5 数据属性肯定有问题）

所有的 CSS 建议都没有完全起作用（实际的表格更复杂：它可能是表格、IE8 或两者兼而有之）。解决方案是不更改元素，而是使元素具有相同的大小、具有更大 z-index 的位置。更新了小提琴... 为了保持浏览器中立，我将不得不弄清楚为什么 jQuery 的位置和大小没有在不同的浏览器中标准化...

4

1 回答 1

0

所有的 CSS 建议都没有完全起作用（实际的表格更复杂：它可能是表格、IE8 或两者兼而有之）。解决方案是不更改元素，而是使元素具有相同的大小、具有更大 z-index 的位置。更新了小提琴... 为了保持浏览器中立，我将不得不弄清楚为什么 jQuery 的位置和大小没有在不同的浏览器中标准化...

于 2012-09-23T02:20:05.867 回答