-1

顧客情報の行を含む 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>

ボタンをクリックしても何も起こらない

4

2 に答える 2

2

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();
  });
});

コードに関するいくつかのコメント：

  1. の使用mysqli_*はmysql_*非推奨です。
  2. エコーで HTML を使用している場合は、試し'てみてくださいecho '<tr class="notes">'。
  3. プリペアド ステートメントを使用する: mysqli.prepare
  4. これをチェックしてください（forループに対して）：mysqli-stmt.fetch
于 2013-11-04T21:08:44.557 に答える
0

スクリプトをドキュメント準備完了関数でラップします。

$(document).ready(function() {
  $('#showNotes').click(function() {
      var showN = rows.filter('.showN').show();
      rows.not( showN ).hide();
  });
});
于 2013-11-04T21:02:56.750 に答える