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传递到您的版功能中并使用this.innerHTML。

同样修复html - ids应该是唯一的，所以要么将它改为一个类，要么在末尾附加一个唯一的数字（在下面的例子中我将它改为一个类） - 你永远不应该在一个循环中有一个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解决方案然后使用新的版本（并从html中删除onmouseover和onmouseout），你可以这样做：

// run in your document ready

var white = $('#white');

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

在悬停时从数据库中获取详细信息值

1 个答案: