从表中创建 jquery 实时预览答案

【问题标题】：Creating a jquery live preview from a table从表中创建 jquery 实时预览
【发布时间】：2015-01-22 09:21:30
【问题描述】：

我有一个 html 表，其中一行如下所示：

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
    <td>265</td>
    <td>NO MATCH</td>
    <td>http://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>

我正在尝试构建一个 jquery 函数，如果我将它传递给表格单元格中的 URL，它将打开一个预览窗口。到目前为止，我有：

$( "td" ).hover( function() {
  var contents = $( this ).html() ;
  if (contents.match("^http")) {
    $( this ).append( $( "<span> ***</span>" ) );

  }   
}, function() {
  $( this ).find( "span:last" ).remove();
});

我找到了一个 jquery 插件 https://github.com/alanphoon/jquery-live-preview，并使用他们的示例代码让它在我看来工作。

然而，在示例中，您需要在表单的 html 中有一个链接：

<a href="http://stackoverflow.com/" target="_blank" class="livepreview">Hover over to preview, click to link!/</a>

我不确定如何最好地进行动态转向：

<td>http://stackoverflow.com/</td>

进入：

<a href="http://stackoverflow.com/" target="_blank" class="livepreview">Hover over to preview, click to link!/</a>

然后使用悬停功能再次返回。它应该在表格中还是在 html 中的其他地方完成？

【问题讨论】：

该插件的文档说，“通过添加相应的 css 类在任何链接（或具有 href 属性的 DOM 元素）上使用”（由我突出显示）——所以我建议您只需在 td 元素上添加一个包含相同 URL 的 href 属性。如果您不希望它使您的 HTML 无效，那么您可以在初始化插件之前通过 JS 在运行时添加它。

标签： javascript jquery html

【解决方案1】：

不确定这是最干净的方法，但它可以满足您的要求。正如 CBroe 在他的评论中所建议的那样，如果插件在链接不存在时初始化，这可能不起作用。

$('.preview-link').hover(
  function() {
    this.innerHTML = '<a href="' + this.innerText + '" target="_blank" class="livepreview">' + this.innerText + '</a>';
  }, function() {
    var text = this.firstChild;
    this.removeChild(this.firstChild);
    this.innerText = text;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="check[]" value="265">
    </td>
    <td>265</td>
    <td>NO MATCH</td>
    <td class="preview-link">http://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="check[]" value="265">
    </td>
    <td>265</td>
    <td>NO MATCH</td>
    <td class="preview-link">http://google.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>
</table>

【讨论】：

谢谢，确实可以。