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>
Related
I have below html code
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
The above data loads fine on page. 2 Headers with Month and Savings and two rows of data that i recieve from backend.
The problem occurs when i dont get any data from backend and i want to display error message on the first row. I am doing it as follows
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<td> No data to show because the request to load user info failed</td>
</table>
As you can see, i want to show error message <td> No data to show because the request to load user info failed on the first row. The problem is this data is getting wrapped up in the first column itself whereas i want this error message to spread across Month and Savings column.
Can anyone help me on how to achieve this ?
You still need to add tbody and tr, and you can use the colspan attribute on the td element to "merge" the columns. For example, colspan="2" makes a cell span two columns.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No data to show because the request to load user info failed</td>
</tr>
</tbody>
</table>
In my WordPress options page, for creating fields I am using Fluent Framework. It is similar to Meta Box. So both of them use do_settings_fields function and the function generates the code like this:
<table class="form-table">
<tr>
<th scope="row">Header 1</th>
<td>Element 1</td>
</tr>
<tr>
<th scope="row">Header 2</th>
<td>Element 2</td>
</tr>
<tr>
<th scope="row">Header 3</th>
<td>Element 3</td>
</tr>
<tr>
<th scope="row">Header 4</th>
<td>Element 4</td>
</tr>
</table>
It looks like this:
In this table, I want to use firs row as a one row like this:
I creted a javascript file to fields/custom_html directory and hide scope with jQuery and enqueue the javascript file like this:
jQuery(document).ready(function()
{
jQuery('th[scope="row"]').first().hide();
});
But this doesn't completely solve my problem. Because I don't mind if I only use one row, but it's very problematic for multi-rows. Maybe I need to close the table tag and open a new table tag again, but I haven't been able to do this with my limited jQuery knowledge.
Merging two columns you have to use "colspan" attributes which can helpful, Here I am sharing the code for jquery.
$(document).ready(function(){
var $table_head = jQuery('tr').first();
var value = $table_head.text();
$table_head.html('<th colspan="2">'+value+'</th>');
});
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>
applying datatable on each table using id but it only triggers for one table and give error in console.
"Uncaught TypeError: Cannot set property 'nTf' of undefined" while i need to display it on every table .
Using class cannot be applied because each table has different td's count .
for instance i have two tables with id's table1 & table2 and calling datatable as
$('#table1').DataTable();
$('#table2').DataTable();
Please advise any help would be appreciated
my first table is
<table id="table1">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>project</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test project</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"></th>
</tr>
</tfoot>
</table>
My second table is
<table id="table2">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>Task</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test task</td>
<td>Edit</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4"></th>
</tr>
</tfoot>
</table>
Using class cannot be applied because each table has different td's count
There is nothing to do when we use datatable for mutiple tables it works only for the tables which have same count of td's and can be applied using the both table's same class
Live Demo
i just had this problem and it turned out to be one too many tds in the tfoot. Check your rows and columns for extras, unclosed tags etc.
i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();