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

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); 
    ...