Скрытая строка таблицы, не отображающая правильную информацию

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

Вы создаете несколько строк с одинаковым идентификатором, который не является хорошей идеей. Вместо этого используйте идентификатор строки для создания уникальных идентификаторов, как:

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.

Теперь вы можете использовать ID в своем Javascript, чтобы выбрать единый правильный набор информации.

Например:

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