Question

好吧，这是一个黑暗中的真实镜头，如果我正确地表达我的头衔还不太确定，但我想做的是如下：

我有一个看起来像这样的html表

<table>
   <tr>
      <td>Type: Tanker </td>
      <td>DWT: 8672.82 </td>
   </tr>
   <tr>
      <td>Flag: Gibraltar</td>
      <td>Pumping Capacity: 12 Cargos pumps each 200m3/h </td>
   </tr>
</table>

我想做的是动态地将所有内容“标题”包装在“：”之前的强项中，以便表格如下所示

<table>
   <tr>
      <td><strong>Type:</strong> Tanker </td>
      <td><strong>DWT:</strong> 8672.82 </td>
   </tr>
   <tr>
      <td><strong>Flag:</strong> Gibraltar</td>
      <td><strong>Pumping Capacity:</strong> 12 Cargos pumps each 200m3/h </td>
   </tr>
</table>

据我所知，我可以通过在表格中添加两列并使用css来轻松实现这一点：第一个子节点和第一个子节点选择器但由于大小/布局限制，这不是我想要这样做的方式

Answer 1

你可以这样轻松地做到：

$('td').html(function(_,h){
    return h.replace(/([^:]+):/, '<strong>$1:</strong>')
});

Demonstration

Answer 2

也许你应该看看definition lists

http://www.w3schools.com/tags/tag_dl.asp

它们似乎在语义上适合您的表类型，并且通过为术语和定义字段（类型，油轮; dwt，数字等）提供单独的HTML标记将帮助您轻松定义CSS样式。

可能的新HTML结构可能是：

<dl>
    <dt>Type</dt>
    <dd>Tanker</dd>
    <dt>DWT</dt>
    <dd>8672.82</dd>
    ...
</dl>

注意：我没有放置:，您可以使用CSS中的:after元选择器添加它们。同样，在css中，您可以指示所有dt标记都以粗体字体呈现。

在某个字符之前将html添加到所有内容

2 个答案: