借助單個按鈕隱藏和顯示動態生成的表格行

Question

我在 WordPress 部分中有一個使用動態數據生成的表格，其中有一個自定義要求，其中“默認情況下應該隱藏大於 3 的表格行。以及應該通過一個按鈕切換顯示更多行或顯示更少表格行的功能。但是，但是，我已經用兩個不同的功能實現了它。我需要一個按鈕來級聯這兩個功能。

就像表格下方顯示“顯示更多”的按鈕一樣，一旦單擊，將顯示所有動態表格行。 並且同一個按鈕在點擊后應該顯示“少顯示”並隱藏回默認狀態。

我知道腳本在服務器上非常煩人，任何替代方案都將不勝感激！

<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
            <thead>
            <tr> 
                <th><strong>Floor Plan</strong></th>
                <th><strong>Dimension</strong></th>
                <th><strong>Price</strong></th>
            </tr>
            </thead>
            <tbody>
            <?php 
            
           
function RemoveSpecialChar($str)
{
     $res = str_replace( array( '\'', '"',
    ',' , ';', '<', 'West', 'Floor Plan', '>' , '-' ), ' ', $str);
    return $res;
}


            
        foreach( $floor_plans as $plans ) { $i++; 
       
        if($plans['fave_plan_title'] == "Master Plan"){
            break;
        }
        
        ?>
                        <tr id="<?php echo $i;?>" class="<?php echo $i;?>">
         
         <td> <a href="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" data-lightbox="roadtrip">
      <img class="borderr" src="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" alt="<?php echo $plans['fave_plan_description']; ?>" width="100" height="100" title="<?php echo $plans['fave_plan_description']; ?>">
          </a></td>
         
         <td>
             
           <?php 
           
            $str=ltrim(chop($plans['fave_plan_description'],"Floor Plan"), get_the_title());
           
            $str1 = RemoveSpecialChar($str);
            echo $str1;
           
           ?> <br>
           <b><?php echo esc_attr( $plans['fave_plan_size'] ); ?> Sqft</b>
           
           </td>
         
               <td><button class="btn btn-primary">Get Quote</button></td>
            </tr>
            
            <?php } ?>
            </tbody>
        </table> <br>
                    <div class="wrapperr">
                    <button class="btn btn-primary" onclick="show()">Show All <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
                    <button class="btn btn-primary" onclick="hide()">Show Less <i class="fa fa-arrow-up" style="font-size:14px"></i></button>
                    </div>
        </div><!-- block-content-wrap -->
    </div><!-- block-wrap -->
</div><!-- property-floor-plans-wrap -->
<?php } ?>

JavaScript：

<script>
    
    document.getElementById('4').style.display = 'none';
    document.getElementById('5').style.display = 'none';
    document.getElementById('6').style.display = 'none';
    document.getElementById('7').style.display = 'none';
    document.getElementById('8').style.display = 'none';
    document.getElementById('9').style.display = 'none';
    document.getElementById('10').style.display = 'none';
    document.getElementById('11').style.display = 'none';
    document.getElementById('12').style.display = 'none';
    document.getElementById('13').style.display = 'none';
    document.getElementById('14').style.display = 'none';
    document.getElementById('15').style.display = 'none';
    document.getElementById('16').style.display = 'none';
    document.getElementById('17').style.display = 'none';
    document.getElementById('18').style.display = 'none';
    document.getElementById('19').style.display = 'none';
    document.getElementById('20').style.display = 'none';


function hide() {

    document.getElementById('4').style.display = 'none';
    document.getElementById('5').style.display = 'none';
    document.getElementById('6').style.display = 'none';
    document.getElementById('7').style.display = 'none';
    document.getElementById('8').style.display = 'none';
    document.getElementById('9').style.display = 'none';
    document.getElementById('10').style.display = 'none';
    document.getElementById('11').style.display = 'none';
    document.getElementById('12').style.display = 'none';
    document.getElementById('13').style.display = 'none';
    document.getElementById('14').style.display = 'none';
    document.getElementById('15').style.display = 'none';
    document.getElementById('16').style.display = 'none';
    document.getElementById('17').style.display = 'none';
    document.getElementById('18').style.display = 'none';
    document.getElementById('19').style.display = 'none';
    document.getElementById('20').style.display = 'none';
}

  function show() {
  
  var a = document.getElementById("4");
  var b = document.getElementById("5");
  var c = document.getElementById("6");
  var d = document.getElementById("7");
  var e = document.getElementById("8");
  var f = document.getElementById("9");
  var g = document.getElementById("10");
  var h = document.getElementById("11");
  var i = document.getElementById("12");
  var j = document.getElementById("13");
  var k = document.getElementById("14");
  var l = document.getElementById("15");
  var m = document.getElementById("16");
  var n = document.getElementById("17");
  var o = document.getElementById("18");
  var p = document.getElementById("19");
  var q = document.getElementById("20");
    
    a.style.display = "";
    b.style.display = "";
    c.style.display = "";
    d.style.display = "";
    e.style.display = "";
    f.style.display = "";
    g.style.display = "";
    h.style.display = "";
    i.style.display = "";
    j.style.display = "";
    k.style.display = "";
    l.style.display = "";
    m.style.display = "";
    n.style.display = "";
    o.style.display = "";
    p.style.display = "";
    q.style.display = "";
}  
</script>

在下面提到的鏈接中可以看到相同的工作示例，查找平面圖部分： https : //doorsandshelters.com/property/sowparnika-indraprastha-2/

Answer 1

您只需要處理為什么客戶端腳本。 更好的解決方案可能是使用 jquery 大於選擇器

html
<button class="btn btn-primary" onclick="toggle(event)">Show More<i class="fa fa-arrow-down" style="font-size:14px"></i></button> 

javascript

var shown = false;
function toggle(e){
if(shown){
jQuery("tr:gt(3)").hide()
e.target.innerText('Show more')
}else{
jQuery("tr:gt(3)").show()
e.target.innerText('Show less')
}
}

Answer 2

取自@gaurav arora 的回答，一種更干凈和可維護的方法。

無需使用 2 個按鈕和不同的onClick處理程序，只需使用單個按鈕並使用 jquery 函數切換行和按鈕文本。 有 2 個按鈕會有問題。

HTML：

<button class="btn btn-primary toggleFloorPlans">Show more <i class="fa fa-arrow-down" style="font-size:14px"></i></button>

JQuery 應該放在文件的最底部：

<script>
let shown = false;
$(document).ready(function(){
    $(".toggleFloorPlans").click(function(){
        var thisEl = $(".toggleFloorPlans"); 
        if(shown){
            jQuery("tr:gt(3)").hide()
            thisEl.text('Show more')
            shown = false;
        } else {
            jQuery("tr:gt(3)").show();
            thisEl.text('Show less')
            shown = true;
        }
    });
});
</script>

我用過這個 jquery CDN，用你的替換它，應該很好用。

這應該在上面的jquery函數之上。

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

---

更新：顯示向上/向下箭頭

<script>
let shown = false;
$(document).ready(function(){
    $(".toggleFloorPlans").click(function(){
        var thisEl = $(".toggleFloorPlans"); 
        if(shown){
            jQuery("tr:gt(3)").hide()
            thisEl.text(`Show more`)
            thisEl.append('<i class="fa fa-arrow-down" style="font-size:14px"></i>');
            shown = false;
        } else {
            jQuery("tr:gt(3)").show();
            thisEl.text('Show less');
            thisEl.append('<i class="fa fa-arrow-up" style="font-size:14px"></i>');
            shown = true;
        }
    });
});
</script>