Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to improve on an old school "Top Screens" page that we currently have. It shows the top 30 in a plain old html table. I want to be able to generate the table with the top 100, but only show the top 20 on page load and then have an expand/collapse button. I have found plenty of examples of fully expanding and collapsing tables and subtables, but I have yet to find an example of partially doing one like I need.
It is currently a very simple 2 column table with headers and minimal CSS styling and JS. I would like to keep it to plain JS if possible, but I do have the JQuery library available to me, I am just not very familiar with it.
Any help would be appreciated.
Thanks in advance!
EDIT
I apologize for what ended up being a relatively easy solution with JQuery, but I am very new to it. After reading through the API docs some more I found the :gt() selector that when combined with toggle() lead to an elegant solution which I am adding for anyone who may be interested.
I added the "collapse" class to my <tbody> so the <thead> would not be affected or counted.
// Hide extra rows on load.
$(document).ready(function() {
$(".collapse").find('tr:gt(19)').hide();
});
// Toggle extra rows on click.
$(".collapse").click(function(){
$(this).find('tr:gt(19)').toggle();
});
The simplelest way to do this would be with jQuery, as you could use the .toggle() method.
In my example I've chosen to only show the first 3 results, so that the code isn't too long.
See my comments in the code to understand what's going on.
$(document).ready(function() {
$("button#sh").click(function() {
$("tr.row:nth-child(n+5)").toggle();
});
});
//Here jQuery listens for a click on the button with id "sh", and when clicked,
//either shows or hides the rows selected by the CSS selector, which is the same as
//the one that hid the rows in the CSS section.
tr.row:nth-child(n+5) {
display: none
}
/* Here all rows after the 4th one will be hidden on load. So you have 1 row for the
header, then 3 rows of data, 3+1=4, so row 5 and on will be hidden. */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is included -->
<button id="sh">Show/Hide</button>
<!-- Here the button that will show and hide the rows is set. -->
<table border="1">
<tr class="row">
<td>Name</td>
<td>Number</td>
</tr>
<tr class="row">
<td>Name 1</td>
<td>1</td>
</tr>
<tr class="row">
<td>Name 2</td>
<td>2</td>
</tr>
<tr class="row">
<td>Name 3</td>
<td>3</td>
</tr>
<tr class="row">
<td>Name 4</td>
<td>4</td>
</tr>
<tr class="row">
<td>Name 5</td>
<td>5</td>
</tr>
<tr class="row">
<td>Name 6</td>
<td>6</td>
</tr>
</table>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have a link inside a table that I would like to do something once clicked, but jQuery doesn't seem to be able to detect that for some reason.
It works fine when I have an onclick="..." on the link.
I also figured out I can't detect clicks on td/tr elements ($('td').click(function(){});), I'm assuming that that's due to the element being inside the table.
But when I try to get the link element ($('#requested-link')) it works fine.
How can I solve this?
I already tried with a higher z-index on link elements, that didn't work.
EDIT:
Here is the part of my code that should catch the clicking of the link
$('.js-remove_baustein_from_versicherung').on("click", function (event) {
event.preventDefault();
console.log(event);
console.log('link was clicked');
});
This is the table:
<table class="table table-striped" id="bausteinTable">
<tr id="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>
A test to see, if jQuery actually 'sees' the element:
$(document).ready(function () {
console.log($('.js-remove_baustein_from_versicherung'));
})
and this is the output:
jQuery.fn.init [a.js-remove_baustein_from_versicherung]
EDIT 2:
Please give me back my posting rights?
You use the same ID in your <td>
Use class instead of id because two elements cannot have the same ID
Get the id from the event.target attribute with attr
and then use the remove() function with jquery to remove the line you want
$('.remove_baustein_from_versicherung').on("click", function(event) {
event.preventDefault();
console.log('DETECTED');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="bausteinTable">
<tr class="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I am using the dokan mutivendor plug-in in the wordpress plug-in.
When I created a child theme and edited the layout, I found a part that cannot be edited. Even if you comment out the relevant part of the layout, it cannot be hidden.
Therefore, it is not possible to attach a class to a specific table row.
At present, the solution is trying to edit the layout with javascript.
As editing contents, I want to delete lines 3, 5, and 6 in the code.
Sorry for the poor explanation, thank you.
<table class="content">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
It's hard to understand your question so please clarify if this is not your requested answer.
You could use the css selector :nth-child(x) to select the correct cells that need to disappear. Then you can use display: none; to hide these cells.
If you don't want other cells to jump in weird places you could use visibility: hidden; instead of display: none;.
table > tbody > tr:nth-child(1) > td:nth-child(3), table > tbody > tr:nth-child(2) > td:nth-child(2), table > tbody > tr:nth-child(2) > td:nth-child(3){
display: none;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm currently making an Excel-like grid with HTML/jQuery/CSS.
I would like to know if there's a way to add more rows on a user-made request (clicking on a button or something).
I have seen some HTML DOM examples in JS on w3schools, but I don't know if it's usable in jQuery. I'd appreciate any kind of a simple example.
Use the below code for understanding and modify as per your need
function addRow(){
var str ="<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr>";
$('#mytable tbody').append(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="mytable" border="1">
<thead>
<tr>
<th>Head 1</h1>
<th>Head 1</h1>
<th>Head 1</h1>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td><td>data 3</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td><td>data 3</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td><td>data 3</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow()" />
I'll give you some starting point friend, first you might need to learn/use ajax, so you can communicate to your server side language if you need to get the data via mysql or any database.
Then you can append the ajax response via DOM manipulation using javascript.
Just read about jquery DOM manipulation.
EDIT
Your flow should be like this.
Add handler on button onclick event via jquery .click(), that handler should contain ajax request $.ajax().
Detect ajax success, via "success" parameter on $.ajax()
Then On success append response data into container via DOM append.
HTML
<table id="someTable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</tbody>
</table>
<button id="newrow">+</button>
JS
$(document).ready(function()
{
var table = $('#someTable'),
newRow = '<tr><td>New Row Val</td><td>New Row Val</td></tr>';
$('#newrow').on('click', function(e)
{
table.find('tbody').append(newRow);
});
});
http://jsfiddle.net/vw437k03/1/ demonstrates a very very basic example of what i think you want.
Use the code provided to load data from AJAX or a form.
P.S look # slickgrid -- http://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html
try to follow this tutorial. I think you are trying to do the same thing as in this tutorial. It has detailed information about creating, editing and deleting rows in a table.
Following is the code for adding a new row to table easily using jQuery.
function Add(){
$("#tblData tbody").append(
"<tr>"+
"<td><input type='text' /></td>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"</tr>");
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAddd" onclick="Add()">New</button>
<table id="tblData">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.
How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/
I have an HTML table which is generated dynamically from server.
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
Can you help me or provide any info on how can I do this?
Ok I think the question is too vague to be answered completely if you think about.
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomas comment.
If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
That said here is a quick and dirty example of what your approach should be like.
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
I can update the answer with a better more personalized answer if you update your question.
But if you want to build it yourself, this are some of this could come in handy:
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
And many other depending on your approach.
Good luck!
Here is a quick example, I hope It helps if I understood your question correctly.
With this structure:
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
An accordion is a simple, elegant solution: javascript and css.
This fiddle is from the W3Schools explanation above.