javascript - 在 <tr> 悬停时从数据库获取详细值

Question

大家好，我有一个问题，我暂时无法解决。我有一个从数据库返回值的循环，我希望每个值都能在 JavaScript 的 onmouseover 属性上查看它们的值。但它只显示所有标签的第一行值。这是代码的 php 部分

$result = "<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
                        <tr>
                            <td colspan='6' class='plate'>Follow-Up Events</td>
                        </tr>
                        <tr style='text-align:center; color:#FFF; background: #31B0D5;'>
                            <td>Customer</td>
                            <td>Plate</td>
                            <td class='col-md-4'>Problem</td>
                            <td>Date Created</td>
                            <td></td>
                        </tr>";

foreach ($followArray as $customer) {

$result = $result .
        "<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
                    <td>$customer->company</td>
                    <td id='plate' onmouseover='plate();' onmouseout='plateout();'>$customer->plate</td>
                    <td>$customer->problem</td>
                    <td>$customer->date</td>
                </tr>";
}
$result = $result . "</table><div id'white'></div>";

和 JavaScript

function plate() {
document.getElementById("white").innerHTML = $("#plate").text();
}
function plateout() {
 document.getElementById("white").innerHTML = "";
}

感谢您的帮助。

Answer 1

由于您使用的是原生 js，只需将 this 传递到您的 Plate 函数中并使用 this.innerHTML。

还要修复 html - id 应该是唯一的，因此要么将其更改为类，要么在末尾附加一个唯一的数字(在下面的示例中，我已将其更改为类) - 你永远不应该在循环中使用 id (除非您要附加索引或类似的内容)。

白色div中应该有一个=

function plate(columnCell) {
  document.getElementById('white').innerHTML = columnCell.innerHTML;
}
function plateout() {
  document.getElementById('white').innerHTML = '';
}

<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
  <tr>
    <td colspan='6' class='plate'>Follow-Up Events</td>
  </tr>
  <tr style='text-align:center; color:#FFF; background: #31B0D5;'>
    <td>Customer</td>
    <td>Plate</td>
    <td class='col-md-4'>Problem</td>
    <td>Date Created</td>
    <td></td>
  </tr>
  <tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
    <td>$customer->company</td>
    <td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate</td>
    <td>$customer->problem</td>
    <td>$customer->date</td>
  </tr>
  <tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
    <td>$customer->company</td>
    <td class='plate' onmouseover='plate(this);' onmouseout='plateout();'>$customer->plate1</td>
    <td>$customer->problem</td>
    <td>$customer->date</td>
  </tr>
  <tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
    <td>$customer->company</td>
    <td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate2</td>
    <td>$customer->problem</td>
    <td>$customer->date</td>
  </tr>
</table>
<div id="white"></div>

如果你想要一个 jQuery 解决方案，然后使用新的 Plate 类(并从 html 中删除 onmouseover 和 onmouseout)，你可以这样做:

// run in your document ready

var white = $('#white');

$('.plate').hover(
  function() {
    // mouseover
    white.text($(this).text());
  }, function() {
    // mouseoout
    white.text('');
  }
);