使用'查看更多'按鈕來增強每個表格行的信息

Question

我有一個非常簡單的html表，有很多信息我想爲每行添加，但我無法顯示頁面加載時的一切，因爲它要使一切都非常笨拙。所以我想在每行的另一列添加一個查看更多按鈕。

我已經嘗試編寫一段JavaScript代碼，但它不工作，因爲我想要的。我要的是：直到我點擊查看更多

1. 行應該是完全不可見的（我試圖把標籤的DIV中，但它通過將表外的行完全搞砸了一切）。

2. 我希望代碼適用於所有行，因此我不必爲每行都編寫單獨的代碼。

3. 我希望行的擴展信息在每次嘗試查看更多行時都是不可見的。

4. 如果可能，我想要一個簡單的動畫來顯示擴展動畫。

下面是我的HTML代碼：

<table> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Action</th> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>Doe</td> 
     <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <div id="example" class="more"> 
       <p>John Doe is a man</p> 
       <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td>Jane</td> 
     <td>Doe</td> 
     <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <div id="example" class="more"> 
       <p>Jane Doe is a woman</p> 
       <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p> 
      </div> 
     </td> 
    </tr> 
</table> 

下面是我的CSS：

<style type="text/css"> 
    .more { 
     display: none; 
    } 
    a.showLink, a.hideLink { 
     text-decoration: none; 
     color: #36f; 
     padding-left: 8px; 
     background: transparent url(down.gif) no-repeat left; 
    } 
    a.hideLink { 
     background: transparent url(up.gif) no-repeat left; 
    } 
    a.showLink:hover, a.hideLink:hover { 
     border-bottom: 1px dotted #36f; 
    } 
</style> 

下面是我的javascript：

<script language="javascript" type="text/javascript"> 
function showHide(shID) { 
    if (document.getElementById(shID)) { 
     if (document.getElementById(shID+'-show').style.display != 'none') { 
     document.getElementById(shID+'-show').style.display = 'none'; 
     document.getElementById(shID).style.display = 'block'; 
     } 
     else { 
     document.getElementById(shID+'-show').style.display = 'inline'; 
     document.getElementById(shID).style.display = 'none'; 
     } 
    } 
} 
</script> 

Answer 1

既然你標記的jQuery，我假設你願意使用它，所以這裏使用jQuery的修復程序的一個例子：

編輯：HTML已經改變，第二行失敗，因爲工作到ID選擇

HTML

<table> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Action</th> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>Doe</td> 
     <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <div id="example" class="more"> 
       <p>John Doe is a man</p> 
       <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td>Jane</td> 
     <td>Doe</td> 
     <td><a href="#" id="example-show" class="showLink" onclick="showHide('exampleFemale');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td><!-- Note the change in the showHide() function --> 
    </tr> 
    <tr> 
     <td colspan="3"> 
     <div id="exampleFemale" class="more"><!-- Note the change in the ID --> 
       <p>Jane Doe is a woman</p> 
       <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('exampleFemale');return false;">Hide this content.</a></p><!-- Note the change in the showHide() function --> 
      </div> 
     </td> 
    </tr> 
</table> 

的Javascript

function showHide(shID) { 
    if ($('#' + shID)) { 
     if ($('#' + shID+'-show').css('display') != 'none') { 
     $('#' + shID+'-show').css({'display':'none'}); 
     $('#' + shID).css({'display':'block'}); 
     } 
    } 
    else { 
     $('#' + shID+'-show').css({'display':'inline'}); 
     $('#' + shID).css({'display':'none'}); 
    } 
} 

注意在礦井JavaScript中的變化 - > jQuery的那裏曾經是document.getElementById(shID+'-show')現在$('#' + shID+'-show')和那裏曾經是.style.display = 'none';現在.css({'display':'none'});

不要忘了包括jQuery的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

希望這會有所幫助！