javascript - 仅从表 'like github does it' 中选择/突出显示列？

Question

github中的源代码是这样存放在一个html表中的:

<table><tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
</tbody></table>

如何选择/突出显示此表，以便不选择行号？ 换句话说:如何只选择第二列的一部分？

我知道 github 可以做到，但我不知道怎么做

可能没有 jquery

Answer 1

他们所做的事情是这样的……

<table><tbody>
<tr>
  <td class='line-number'>1</td>
  <td class='line-code'>// here is a comment</td>
</tr>
<tr>
  <td class='line-number'>2</td>
  <td class='line-code'>var i = 1;</td>
</tr>
<tr>
  <td class='line-number'>3</td>
  <td class='line-code'>console.log(i);</td>
</tr>
</tbody></table>

然后，他们所做的就是更改 line-code 类的背景和/或前景。

.line-code {
  background-color: silver;
  color: white;
}

要防止数字被选中，试试这个...

.line-number {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

这将阻止内容被选中，因此允许一个干净的副本。