This question already has answers here:
Adding a table row in jQuery
(42 answers)
Closed 7 years ago.
I'm using the following code trying to append a new row to jquery but it's not working.
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
My table is setup like so:
<table class="view-bookings-table mobile-optimised hidden" id="search-results">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
<th scope="col">Car Reg.</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
EDIT
My full code is actually:
$('#search').submit(function(event) {
event.preventDefault();
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
});
Your code is fine and works well with every possible version of jQuery.
demo
You may have a jQuery error somewhere else on your page or you are not loading it. Also what is
class='hidden'
doing? Maybe it's just a css issue?
Related
This question already has answers here:
CSS #media print issues with background-color;
(22 answers)
Closed 5 years ago.
I have a table in which I make some calculations and eventueel use the jquery function .css() to add new css rules(coloring table background) to the table.
Now when I want to print the page, I get a black and white page without any effect.
How can I print my table while maintaining the table?
I know you can make special stylesheets for printing, but I have currently no clue on how to do this. Any help is welcome.
HTML:
<table id='tbl1' style="width:100%">
<tr>
<th>Name</th>
<th>Location</th>
<th>Amount in kg</th>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 1</td>
<td>1237</td>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 2</td>
<td>1341</td>
</tr>
</table>
Code example
table = $('#tbl1').find('td:nth-child(3)').each(function() {
val = parseInt($(this)[0].innerText, 10);
if (val > 1300) {
$(this).css({"background-color": "green"});
}
else {
$(this).css({"background-color": "red"});
}
});
Here is a fiddle example:
https://jsfiddle.net/toofle/jng2h9rp/
Thanks in advance!
Write your css adding media="print" in style tag, that will be applicable to only print section
<style media="print">
// your code
</style>
I am trying to generate PDF file from html table using JSPDF and AutoTable.
In my example there is a html table with two header row as follows:
<table id="table" style="display:none ;">
<thead>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th >Country</th>
<th >IP-address</th>
<th >IP-address</th>
</tr>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th> Country</th>
<th >IP-address</th>
</tr>
</thead>
</table>
But the PDF file is generated with single header row.. how to solve this problem?
and one more is there any option to generate PDF file with the selected Column only.
Fiddle is here:
https://jsfiddle.net/x22fk0p4/3/
UPDATE: v3 supports multiple header rows so the below now inaccurate.
The plugin does not support it out of the box, but it can be done manually with the hooks. I would almost consider this a hack though. What I did was first increasing the height of the default header, then simply draw the secondary header in the space that was freed because of it.
In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");
I have a simple table like
<table>
<thead>
<tr><th>A</th><th>B</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
</tbody>
</table>
I actually wanted the thead columns to behave like buttons for sorting table ascending or descending order-wise.
I found an option of using datatables plug-in which works like this.
But I am using jquery 2.1.1 and the above plug-in isn't available for this version.
I am bit confused of how to proceed further to make such implementation with my code.
Any help will be appreciated!
"Stupid jQuery Table Sort" seems to fully support jquery 2+.
JSbin demo: http://jsbin.com/wimefeseni/1/edit?html,output
JS:
$(function(){
$("table").stupidtable();
});
HTML:
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
</tbody>
Link to plugin: http://joequery.github.io/Stupid-Table-Plugin/
How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:
I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.
Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly
<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>