Question

我在使用Javascript时遇到了一些问题。我有一张表格，当员工根据客户名称进行搜索时，会显示客户的基本信息。当员工点击＆＃34;查看销售历史记录＆＃34;将显示特定客户的销售历史记录的隐藏表格行。

当我将css显示更改为＆＃34; table-row＆＃34;时，显示从搜索返回的所有客户的销售历史记录没有问题。但是，每当我隐藏表格行并包含javascript以显示隐藏行时，它只会显示第一个客户的销售历史记录。

这是我到目前为止所做的尝试，希望有人可以帮助我。

while($row = mysql_fetch_assoc($result)) {
     $id = $row["id"];
     $cfname = $row["f_name"];
     $clname = $row["l_name"];
     $cemail = $row["email"];
     $ccompany = $row["company_name"];
     $year = $row["year"];
     $product = $row["product"];
     $employee = $row["employee"];
     $status = $row["status"];
     echo '<tr>
            <td>'.$cfname.' '.$clname.'</td>
            <td>'.$cemail.'</td>    
            <td>'.$ccompany.'</td>      
            <td> <h4 id="vsalesHistory" onclick="vsalesHistory()">View Sales History</h4></td>
            </tr>';

     echo '<thead id="salesHistoryHead">
            <tr>
             <th>Date of Sales</th>
             <th>Type of Product</th>
             <th>Previous Sales Manager</th>
             <th>Job Status</th>
            </tr>
            </thead>';
    echo '<tr id="salesHistory">
            <td>'.$year.'</td>
            <td>'.$product.'</td>
            <td>'.$employee.'</td>
            <td>'.$status.'</td>
        </tr>';

}
echo '</table>';

这是我的JS脚本

function vsalesHistory(){
    var e = document.getElementById('salesHistoryHead');
    var f = document.getElementById('salesHistory');
    if(e.style.display == 'table-row'){
        e.style.display = 'none';
    }else{
        e.style.display = 'table-row';
        }
    if(f.style.display == 'table-row'){
        f.style.display = 'none';
    }else{
        f.style.display = 'table-row';
        }
}

Answer 1

您正在使用相同的ID创建多个行，这不是一个好主意。而是使用行ID创建唯一的iD，例如：

echo '<thead id="salesHistoryHead' . $id . '">
        <tr>
         <th>Date of Sales</th>
         <th>Type of Product</th>
         <th>Previous Sales Manager</th>
         <th>Job Status</th>
        </tr>
        </thead>';
echo '<tr id="salesHistory' . $id . '">
        <td>'.$year.'</td>
        <td>'.$product.'</td>
        <td>'.$employee.'</td>
        <td>'.$status.'</td>
    </tr>';

然后使用按钮操作传递ID，例如

        <td> <h4 id="vsalesHistory" onclick="vsalesHistory(' . $id . ')">View Sales History</h4></td>

如果$ id是一个字符串，则需要在调用vsalesHistory时引用它。

现在，您可以使用Javascript中的ID来选择一组正确的信息。

例如：

function vsalesHistory(id){
    var e = document.getElementById('salesHistoryHead'+id);
    var f = document.getElementById('salesHistory'+id);
    ...

隐藏的表行不显示正确的信息

1 个答案: