0

我将旧的 html 标记存储在我的数据库中，跟踪更改，然后尝试使用Differ和:html格式选项呈现差异。

成功生成以下代码：

<table>
...
<tr>
  <th style="width:60px; text-align:left;">
    Owner:
  </th>
  <del class="differ">
    <td>
      &nbsp;<span id="someID">Previous Owner Name</span>
    </td>
  </del>
  <ins class="differ">
    <td>
      &nbsp;<span id="someID">Current Owner Name</span>
    </td>
  </ins>
</tr>
...
</table>

注意<del>和<ins>标记的元素。

如果我查看源代码，它看起来不错。

但是因为显然这会破坏表格布局，所有浏览器似乎都将这些新元素移动到表格之前。当我检查元素时，我得到以下信息：

<del class="differ">   </del>
<ins class="differ">   </ins>
<table>
...
    <tr>
      <th style="width:60px; text-align:left;">
        Owner:
      </th>
        <td>
          &nbsp;<span id="someID">Previous Owner Name</span>
        </td>
        <td>
          &nbsp;<span id="someID">Current Owner Name</span>
        </td>
    </tr>
...
</table>

我尝试编写一个自定义 Rails 视图助手来替换每个<ins>和<del>，<span>但同样的事情发生了。

有没有办法像我尝试做的那样使用元素来设置表格的样式，还是我必须走 dom 并<td>使用 javascript 将样式应用于每个适当的样式？一开始我无法替换表格，因为我不控制来源。

4

2 回答 2

0

感谢 David 和 Steve 确认了这个问题，我能够通过将<ins>and<del>标记转换为类，并在渲染视图之前使用 Nokogiri 将它们应用于每个子元素来解决这个特定情况。

我创建了一个table_safe助手，如下所示：

  def table_safe(markup)
    parsed = Nokogiri.parse(markup)
    parsed.css('ins').children().each do |el|
      if el['class']
        el['class'] = el['class'] << ' ins'
      else
        el['class'] = 'ins'
      end
    end
    parsed.css('del').children().each do |el|
      if el['class']
        el['class'] = el['class'] << ' del'
      else
        el['class'] = 'del'
      end
    end
    parsed.to_s
  end

这显然可以重构，但它解决了问题。理想情况下，我可以修改Differ gem:html中的格式化选项，以便它在第一个嵌套元素本身没有更改的情况下插入标签。我不确定为什么这不是默认功能，但它超出了我的能力范围。

于 2012-12-03T02:00:28.927 回答
-1

为什么不添加一个 CSS 样式表来将样式类复制differ到所有 TD 元素？

<link rel="stylesheet" type="text/css" href="some.css" />

然后在样式表中定义如下：

td {
 padding: 15px;
 background-color: gold;
 text: black;
 font-family: Courier, "Courier New", Tahoma, Arial, "Times New Roman";
 border: 1px solid black;
 /* Some other properties here...... */  
}

和一个示例 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Anything</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="ja.css" />
 </head>


 <body bgcolor="white" text="black">

<table>
<tr>
 <td>A</td>
 <td>B</td>
</tr>


<tr>
 <td>C</td>
 <td>D</td>
</tr>
</table>

 </body>
</html>

工作示例：

http://pastehtml.com/view/ckdf6rxo3.html

也许这个 W3Schools 链接会很有用：

CSS 样式表

于 2012-12-03T01:30:27.407 回答