Question

我有一堆旧的经典ASP页面，其中许多都在表格中显示数据库数据。所有页面都没有内置任何排序功能：您可以使用原始开发人员认为适合使用的任何ORDER BY子句。

我正在快速修复以通过客户端javascript进行排序。我已经编写了一个主要完成我需要的脚本。但是，我仍然需要添加一点功能。这些页面中的表格行通常具有交替的行颜色，用于实现此目的的机制因页面而异。它可能就像更改CSS类一样简单，或者样式可能是由ASP代码内联呈现的。

现在，在对表格进行排序之后，每一行都保持着色方案的渲染，因此交替的行不再交替。我希望用这样简单的东西来修复它：

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

不幸的是，你不能像这样设置元素的样式属性。它抱怨该对象没有setter。我怎么能这么做呢？没有像jQuery这样的框架允许在这里 - 这不在我的手中。

更新
虽然这将是最好的解决方案，但将100多个页面重构为所有使用类而不是内联样式是不切实际的。此外，有时候涉及的不仅仅是背景颜色。例如，一行可以比交替行更暗或更亮，一种样式具有不同的前景色以及容纳。或者交替的样式可以设置不同的边界。我真的不知道所有这些页面上使用了什么，所以我需要一些通常将所有样式从一行应用到另一行的东西。

Answer 1

您可以尝试抓取cssText和className。

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

不完全确定浏览器与cssText的兼容性。

Answer 2

你可以设置任何元素的样式属性......诀窍是在IE中你必须以不同的方式做到这一点。（bug 245）

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

请注意，在IE8中，在标准模式下，第一种方式可行。

Answer 3

对我而言，这有效：

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}

Answer 4

我想要注意的是，通常更喜欢更改节点的类而不是它的样式，并让CSS处理这意味着什么。

Answer 5

DOM元素 style “property”是元素上定义的所有样式属性的只读集合。（集合属性是只读的，不一定是集合中的项目。）

最好在元素上使用className“property”。

Answer 6

不要设置样式对象本身，设置作为元素属性的样式对象的背景颜色属性。

是的，即使你说不，jquery和tablesorter及其斑马条纹插件可以在3行代码中为你完成所有这些。

只是设置class属性会更好，因为那时你对样式的非硬编码控制更有条理

Answer 7

如果您只想更改行的颜色，只需访问style.backgroundColor属性并进行设置即可。

Here是指向JS转换的CSS属性的快速链接。

在javascript中设置HTML元素的样式属性

7 个答案: