A newbie question,really.
Suppose I have a html table like this:
<div id="div1">
<table id="table1" border="1">
<tr>
<th bgcolor="#eee"><strong>ID</strong></th>
<th bgcolor="#eee"><strong>Price</strong></th>
</tr>
<tr>
<td id='id1'>1111</td>
<td id='id2'>2222</td>
</tr>
</table>
</div>
Now I am using Jquery to get data in json format from server, like this:
id1,19.99
id2,29.99
id3,39.00
What I want to achieve is: Look at the data, if the id already exist in table, update the cell value. If id doesn't exist in the table, add a new row. How do I do that in JQuery? I just started to learn JQuery. Now I can use ajax call to get the data, but don't know how to update the table. Any help is appreciated.
To see if a cell exists, you must test the .length of its selector:
$('#'+str).length; // zero if there is no such ID
Or you can just update the contents of that cell with .text(), which will fail if the ID doesn't exist:
$('#'+str).text(newvalue);
To create a new row, you can .append() it to the table:
$('table tr#id_of_row').append('<td id="'+str+'">'+newvalue+'</td>');
You can get a cell by id like this
$('#'+id).length //length will be 0 if not found or 1 if found
Update the value using
$('#'+id).text(new_value);
Related
This is my code:
<tbody>
{#participants}
<tr>
<td id="id">{.fullName}</td>
</tr>
{/participants}
I am writing this code in .dust file. I want to append row index value to my td's ID. Is there any way to do it? Thanks in advance!
Do you want the index from your database row? Then you might want to to something like:
<td id="id_{.id}">{.fullName}</td>
...where {.id} contains the value of the ID of the row. this would be the best method, as it required no javascript, this method is fastest.
{$idx} will give you the current index.
Example
<tr>
<td id="id_{$idx}">{.fullName}</td>
</tr>
I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.
I have table created dynamically in JavaScript.
I have this table:
Here the way how I get rows from the table above:
var trows = table.rows;
This way I get all the rows from the table above including the header row.
My question is there any way to get all rows from the table except header row?
Put all those rows inside <tbody> and put the header inside <thead> Then do
var trows = document.getElementById('tableid').getElementsByTagName('tbody')[0].rows;
before answering your, i would like to suggest to construct the table structure as given below so that you can get result what you exactly needed.
<table>
<thead>
<tr>
<th>heading</th>
</tr>
</thead>
<tbody id="tableid">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
And then in your script,now you can get the result as follow
var trows = table.rows;
i hope you might be satisfied with this answer, if not post a question without any hesitation. thank you
Remove first value of an array with .shift
trows.shift(); // remove first line
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Add table row in jQuery
I want to add a new row to my table on a change event. Here is what I have so far:
$('#CourseID').change(function() {
$('#CourseListTable > tr > td:last').append('<td>...</td>');
});
Here is my table:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table id="CourseListTable">
<tr>
<th>Course ID</th>
<th>Course Section</th>
<th>Level</th>
</tr>
<tr>
<td><select name="CourseID" id="CourseID"></select></td>
<td><select name="CourseSection" id="CourseSection"></select></td>
<td><select name="Level" id="Level"></select></td>
</tr>
</table>
I am not able to get this to work. I am missing something over here can anyone let me know where my error lies?
Thanks in advance.
You mention append Row but in your code you are appending just cells.
If you need to actually append a full row, try this:
$('#CourseID').change(function() {
$('<tr/>').append('<td>...</td>').insertAfter('#CourseListTable tr:last');
});
This line:
$('#CourseListTable > tr > td:last').append('<td>...</td>');
appends a TD (<td>...</td>) to an existing TD (td:last); you want to append it to a TR, eg.
$('#CourseListTable > tr').append('<td>...</td>');
Of course, you mentioned wanting to add a new row, in which case you shouldn't be appending a <td> at all, you should be appending a <tr> (and you should append it to the table, obviously).
$('#CourseID').change(function() {
$('#CourseListTable > tbody > tr:eq(1)').append('<td>...</td>');
});
If you want to add a new row you have to add a tr
$('#CourseListTable tr:last').after('<tr><td>...</td><td>...</td><td>...</td></tr>');
You should use after instead, append will append the element inside the tr.
$('#CourseID').change(function() {
$('#CourseListTable tr:last').after('<tr><td>test</td><td>test</td><td>test</td></tr>');
});
follow this:
Customizing JQuery Cloned row attributes
It lets you clone, append and then customize each cell.. very flexible.
I am trying to append table rows to an existing table.
This is how my table is structured:
<div id="productListContainer">
<table id="productListTable">
<thead>
<tr>
<td>
#
</td>
<td>
Product Name
</td>
<td>
Price
</td>
<td>
Quantity
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
With the following function I am trying to append a new table row:
function(data) {
if (data.productAdded !== "undefined") {
$("#productListTable tr").append().html(data.productAdded);
}
}
Which successfully appends one row. However, if I select a different item which triggers the same function, then the added table row will be overwritten with the new one.
I am using this function within an ajax call as the success message.
'data' is a JSON object which contains productAdded which itself is the table row as a string.
What you want to do is append a row to the body of the table I assume. For this you'll need to do this -
$("#productListTable tbody").append(html_string);
Your html_string will need to contain all the necessary <tr> and <td> elements to match up with your table's header.
References -
.append() documentation - http://api.jquery.com/append/
jsFiddle demo
Calling .append() with no parameters, doesn't append anything, and returns the original jQuery object. So, when you call .html() you're replacing the <tr>'s contents.
It should be:
$("#productListTable tr").append(data.productAdded);
EDIT: That would append to the <tr> inside the <thead>. I assume you want to append to the <tbody>.
$("#productListTable tbody").append(data.productAdded);
EDIT 2: When appending to a table, you need to make sure you have a <tr> and the right number of <td>s in your string.