javascript - 隐藏表行未显示正确信息

Question

我的 Javascript 遇到一些问题。我有一个表格，当员工根据客户名称进行搜索时，显示客户的基本信息。当员工单击“查看销售历史记录”时，将显示特定客户销售历史记录的隐藏表行。

当我将 css 显示更改为“table-row”时，显示从搜索返回的所有客户的销售历史记录没有问题。然而，每当我隐藏表格行并包含 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);
    ...