Question

我在我的数据库中存储旧的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>，但同样的事情发生了。

有没有办法使用像我正在尝试的元素来设置表的样式，或者我是否必须使用javascript将dom应用于每个适当的<td>？我不能在开头替换表，因为我不控制源。

Answer 1

感谢David＆amp;史蒂夫确认了这个问题，我能够通过将<ins>和<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格式化选项，以便在第一个嵌套元素内部插入标记（如果该元素本身未更改）。我不确定为什么这不是默认功能，但它超出了我的能力范围。

Answer 2

为什么不添加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 Styling Tables

将样式插入到html表中

2 个答案: