auf eine Schaltfläche klicken, um versteckte Zeilen

Question

anzeigen würde ich fragen, wird es möglich sein, dass ich eine Tabelle wie folgt aus: JsFiddle

Erwartetes Ergebnis mit Produkt BCD versteckt:

<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> 

Ich will es zunächst zeigt nur "Produkt A" und "Produkt B, C, D" drei versteckte Zeilen. Bis ich auf den Button "Weitere Produkte anzeigen" klicke, werden die Zeilen für "Produkt B, C, D" angezeigt. Und die Schaltfläche wird "Weniger Produkte anzeigen", während die "Produkt B, C, D" wieder ausgeblendet wird ...

Ich bin nicht so vertraut mit der Tabelle Attribut, so dass ich fragen möchte, ob es wird möglich sein, dies zu tun? Ich bin mir nicht sicher, ob das Attribut <td> damit umgehen kann ... Oder ist es tatsächlich besser, <div> und jQuery zu verwenden, um diese Aktion zu steuern?

Answer 1

ich Ihre jsfiddle https://jsfiddle.net/6xfdez2x/1/

Verwenden Sie eine Klasse aktualisierten Zeilen zu verstecken

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

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

Answer 2

Mit CSS und jQuery Sie die $.text() der button ändern und auf click eine Klasse in die Tabelle, die den Zustand wechselt und CSS verwenden, um die Zeilen zu verstecken/zeigen.

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>

Answer 3

Ich bin nicht sehr vertraut mit dem Tisch so Attribut, das würde ich gerne fragen, ob das möglich ist? Ich bin mir nicht sicher, ob das Attribut <td> damit umgehen kann.

Sie müssen das HTML-Element <table> nicht verwenden. Nach MDN:

HTML-Tabellen sollten für Tabellendaten verwendet werden - dafür sind sie bestimmt.

Oder tatsächlich wird es besser sein <div> und jQuery zu verwenden, um diese Aktion zu kontrollieren?

Als allgemeine Regel gilt, nicht jQuery verwenden, wenn Sie einfach etwas mit einfachen JavaScript tun können:

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>