點擊一個按鈕來顯示隱藏的行

我想問一下，才能夠說我有一個這樣的表：JsFiddle 點擊一個按鈕來顯示隱藏的行

預期的結果與產品BCD隱藏：

<table> 
    <th> 
    Product Detail Display 
    </th> 
    <tr> 
    <td> ----- Product A -----</td> 
    </tr> 
    <tr> 
    <td> 
     <div class="left">Total: 4 Product(s)</div> 
     <div class="right"><button>View More Products</button></div> 
    </td> 
    </tr> 
</table>

我想它最初將只顯示「產品A」，而「產品B，C，D」將爲三個隱藏行。在我點擊「查看更多產品」按鈕之前，會顯示「產品B，C，D」的行。並且該按鈕將變成「查看更少的產品」，而「產品B，C，D」將被再次隱藏...

我對錶格屬性不太熟悉，所以我想問一下它是否會有可能這樣做嗎？我不知道<td>屬性可以處理這個...或者實際上使用<div>和jQuery來控制這個動作會更好嗎？

來源

2017-06-17 Sammi

我更新您的jsfiddle https://jsfiddle.net/6xfdez2x/1/

使用一個類來隱藏行

$('#more').on('click',function(){ 
    $("#tbl tr.occult").show(); 
    $(this).hide(); 
    $('#less').show(); 
}); 

$('#less').on('click',function(){ 
    $("#tbl tr.occult").hide(); 
    $(this).hide(); 
    $('#more').show(); 
});

來源

2017-06-17 19:22:07

謝謝！它正在工作！請問在我們調用腳本文件時，添加'完整性'和'跨部門'有什麼用處？ – Sammi

我忘了刪除它們，當我複製jquery的來源，這篇文章解釋了他們https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attribute –

使用CSS和jQuery修改button的$.text()和click向表中添加一個類，該類切換狀態並使用CSS來隱藏/顯示行。

var $table = $('table'), 
 
\t \t $button = $('button'); 
 
$button.on('click',function() { 
 
\t if ($table.hasClass('more')) { 
 
    \t $table.removeClass('more'); 
 
    \t $(this).text($(this).data('more')); 
 
    } else { 
 
    \t $table.addClass('more'); 
 
    \t $(this).text($(this).data('less')); 
 
    } 
 
})

td{ 
 
    text-align:center; 
 
} 
 

 
.left{ 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
.right{ 
 
    width:50%; 
 
    float:right; 
 
    text-align: right; 
 
} 
 

 
tr:nth-child(n + 3):not(:last-child) { 
 
    display: none; 
 
} 
 

 
.more tr:nth-child(n + 3):not(:last-child) { 
 
    display: table-row; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <th> 
 
    Product Detail Display 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> ----- Product A -----</td> 
 
    </tr> 
 
    <tr> 
 
    <td> ----- Product B ----- </td> 
 
    </tr> 
 
    <tr> 
 
    <td> ----- Product C ----- </td> 
 
    </tr> 
 
    <tr> 
 
    <td> ----- Product D ----- </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="left">Total: 4 Product(s)</div> 
 
     <div class="right"><button data-less="View Less Products" data-more="View More Products">View More Products</button></div> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-06-17 19:12:23

謝謝！它正在工作！對我來說這是一個很好的和高級的參考！謝謝！ – Sammi

@Sammi不客氣:)我很好奇你爲什麼選擇其他答案作爲解決方案？海事組織不是一個好的解決方案，但如果它對你更好，你介意告訴我爲什麼？出於好奇，所以我知道在我幫助人時前進 - 不鼓勵你選擇我的解決方案或類似的東西。 –

我不太熟悉的表格屬性，這樣我會想問是否可以這樣做？我不確定<td>屬性可以處理這個問題。

您不需要使用HTML <table>元素。根據MDN：

HTML表格應該用於表格數據 - 這是他們的目的。

或者實際上這將是更好地使用<div>和jQuery來控制這個動作？

一般情況下，不使用jQuery的時候，你可以很容易地做一些與普通的JavaScript：

document.querySelector('button').addEventListener('click', function() { 
 
    if (this.textContent == 'View More Products') { 
 
    this.textContent = 'View Fewer Products'; 
 
    } else { 
 
    this.textContent = 'View More Products'; 
 
    } 
 
    document.querySelector('div').classList.toggle('hidden'); 
 
});

.hidden { 
 
    display: none; 
 
}

<h1>Product Detail Display</h1> 
 
<p> ----- Product A ----- </p> 
 
<div class="hidden"> 
 
    <p> ----- Product B ----- </p> 
 
    <p> ----- Product C ----- </p> 
 
    <p> ----- Product D ----- </p> 
 
</div> 
 
<p>Total: 4 Product(s) <button>View More Products</button></p>

來源

2017-06-18 19:51:57 Mori

點擊一個按鈕來顯示隱藏的行

回答

相關問題