Question

我在php中创建了一个包含客户信息行的表，另外一行包含有关每个客户的注释。

我希望桌子上方的按钮在点击时会显示或隐藏每个客户的笔记行。到目前为止，我的代码似乎没有产生任何东西，我在这里创建表：

echo "<table id='listTable' border='1' cellpadding='10' class='listTable'>";
    echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Company Name</th> <th>Telephone</th> <th>Alt/ Telephone</th>   <th>Address </th>  <th>Town</th>  <th>Postcode</th>  <th></th>   <th></th> <th></th> <th></th></tr>";

    // loop through results of database query, displaying them in the table 
    for ($i = $start; $i < $end; $i++)
    {
            // make sure that PHP doesn't try to show results that don't exist
            if ($i == $total_results) { break; }

            // echo out the contents of each row into a table
            echo "<tr class='main'>";
            echo '<td>' . mysql_result($result, $i, 'id') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'First_Name') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'Surname') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'Company_Name') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'Telephone') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'Alt_Telephone') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'line_1') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'town') . '</td>';
            echo '<td>' . mysql_result($result, $i, 'postcode') . '</td>';
            echo '<td><a href="edit.php?id=' . mysql_result($result, $i, 'id') . '">View</a></td>';
            echo '<td><a href="delete.php?id=' . mysql_result($result, $i, 'id') . '">Delete</a></td>';
            echo '<td><a href="archive.php?id=' . mysql_result($result, $i, 'id') . '">archive</a></td>';
            echo '<td><a href="NewJob.php?id=' . mysql_result($result, $i, 'id') . '">New Job</a></td>';
            echo "</tr class='notes'>"; 
            echo "<tr>";
            echo '<td>' . mysql_result($result, $i, 'notes') . '</td>';
            echo "</tr>"; 

    }
    // close table>
    echo "</table>";

并在我的代码顶部添加以下Javascript

<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<head>
    <title>View Records</title>

<script language="Javascript">
var rows = $('table.listTable tr.notes');

$('#showNotes').click(function() {
    var showN = rows.filter('.showN').show();
    rows.not( showN ).hide();
});

</script>
</head>

进一步向下创建切换按钮

<button id="showNotes">Toggle Notes</button>

当我点击按钮时，没有发生任何事情

Answer 1

您可以将课程notes添加到关闭代码</tr>。

你有：

echo "</tr class='notes'>"; 
echo "<tr>";

应该是：

echo "</tr>"; 
echo "<tr class='notes'>";

和jQuery：

$(document).ready(function() {
  $('#showNotes').click(function() {
      $('#listTable tr.notes').toggle();
  });
});

现在有一些关于你的代码的评论：

使用mysqli_*，mysql_*已被弃用。
如果您在echo中使用HTML，可以尝试使用'：我认为echo '<tr class="notes">'看起来更好。
使用预先准备好的陈述：mysqli.prepare
检查一下（针对for循环）：mysqli-stmt.fetch

Answer 2

将脚本包装在文档就绪函数中：

$(document).ready(function() {
  $('#showNotes').click(function() {
      var showN = rows.filter('.showN').show();
      rows.not( showN ).hide();
  });
});

在Jquery中切换来自php的表echod的显示

2 个答案: