Javascript 在datatables中将图像/图标添加为行值

我需要在行的最后一列添加一个图像/图标。当我将鼠标悬停在该图标上时，该图标应该有一个工具提示，它应该显示来自服务器的数据。我不知道如何实施这一点。任何实现此功能的专家都请帮助我。提前谢谢

编辑

这是我拥有的示例数据，当鼠标悬停在上面时，我需要为最后一列添加一个图标，以显示工具提示中带有“数据”的工具提示

{
    "iTotalRecords": 5,
    "sEcho": "1",
    "aaData": [
        [
            "V2993ASFKH230943",
            "Honda",
            "Accord",
            "data"
        ],
        [
            "V2993A39SNF30943",
            "Honda",
            "CRV",
            "data"
        ],
        [
            "V4833A39SNF30943",
            "Acura",
            "TSX"
        ],
        [
            "V4833RE9SNF30943",
            "Acura",
            "TL",
            "data"
        ],
        [
            "V9383RE9SNF30943",
            "Acura",
            "MDX",
            "data"
        ]
    ],
    "iTotalDisplayRecords": 5
}

[更新]

图像标记的最终外观如下所示：

var imgTag = '<span class="mytext" ><span class="ui-icon ui-icon-wrench" ></span>';

当我停留在它上面时，它不知何故不起作用。它不会触发jquery模式

更新

---

你是对的，这是一个时间问题。我解决了这个问题。现在，当我在上面悬停时，它正在将所有图像加载到模式中，也就是说，我拥有的行数就是打开的模式对话框的数量。我需要将值aData[3]传递给jquery模式。

我将图像存储在服务器上的文件夹中，并将图像的地址存储在数据库中，而不是尝试将图像数据本身存储在数据库中。您还可以存储其他元信息，如高度、宽度和您提到的alt文本。如果需要，您可以构建代码将图像上载到该文件夹，当您上载图像时，您有机会将图像数据添加到数据库。

这将稍微取决于工具提示的实现方式。每一个第三方“花式”JavaScript工具提示都会做不同的事情。这里的示例只是演示如何获取两条数据（make和model）并将它们推送到单元格的“title”属性中，这将触发浏览器的内置工具提示

我想你将要使用一个工具提示插件或类似的东西，所以你必须接受这个例子的一般原则，并使它们适应特定的工具提示。好了，够了

--

这一切都将发生在fnRowCallback[更新：1.10 forward仅使用“rowCallback”]，这是DataTables对象中的一个属性，您可以在初始化期间设置它。这样做的结果是，在呈现每一行时，您都有机会修改HTML（nRow），并在修改后返回它，以便将其推送到DOM中

（注意：当它有助于可读性时，我倾向于使用比严格必要的更多的变量。我还保留iDisplayIndex和iDisplayIndexFull。如果需要，您应该可以删除它们）

在CSS中，默认情况下将其设置为隐藏（

#dialogContainer{display:none}

）

现在您已经有了容器，可以在其上使用

.dialog（）

函数。使用上面的原始示例（注意，我已经添加了类“hoverImage”），您可以将aData[3]填充到图像的标题中，而不是我示例中的任何内容。标题充当aData[3]数据的“存储”

现在，完全在DataTables初始化之外，在document ready函数中（您可能已经有一个），您可以绑定mouseenter事件：

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
  e.preventDefault; // if you want to prevent the browser tooltip
  var dialogContainer = $('#dialogContainer');
  dialogContainer.html(this.title); // replace contents of dialog with the title of the image
  dialogContainer.dialog({ /* options */ });
});

---

关于模态对话框：您使用的是自侦听事件绑定器，因此存在时间问题。要将工具提示绑定到的元素在执行时不可用。您可以逐行执行绑定（不推荐），也可以将侦听器设置为祖先。在示例代码中，我没有看到模态的内容设置在哪里。它使用jqueryui吗？（.dialog（）是一个常用函数名，但它在jQuery UI中）。该对话框实际上是模态的（需要操作）还是只是一个出现的对话框？我挠头想把内容传递给模态。这只是一个出现的对话框，但里面有aData[3]的内容。用一个例子更新了我的答案我真的很抱歉打扰你。我从jQueryUI中获取了图像，当我将鼠标悬停在该图像上时，它会触发包含信息的jQueryModalUI。从上面的例子来看，如果我在fnRowCallBack中调用该模式，则该模式将在页面加载时打开，而不是在我将鼠标悬停在图像上时打开。这是一个糟糕的示例。我已经更新了。希望它会更好，但我可能现在工作太忙，无法在这里编写像样的代码很高兴听到它最终成功了。我做了很多事情。

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var theMake = aData[1],
      theModel = aData[2];

  var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>'; 
  /* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */

  $('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup

  return nRow;
}

  <!-- ... -->
  <div id="dialogContainer"></div>
</body>

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
  e.preventDefault; // if you want to prevent the browser tooltip
  var dialogContainer = $('#dialogContainer');
  dialogContainer.html(this.title); // replace contents of dialog with the title of the image
  dialogContainer.dialog({ /* options */ });
});