.append() removes added element - javascript

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.

Related

Child element isn't being selected properly if used variable inside selector

I am trying to select tbody element of a table but it's not working properly. I have a table -
<table id="dislike_view_<?php some_func(); ?>">
<tr><td>USER</td><td>DATE</td></tr>
<tbody>
<tr><td>aj0ob</td><td>06/05/2018</td></tr>
</tbody>
</table>
I am trying to add html before first child of tbody. But it's adding the html twice. It adds the HTML before first child of table and before first child of tbody. Here's my jquery code -
$('<tr><td>...</td><td>...</td></tr>').prependTo('#dislike_view_'+id+' > tbody');
var id is being called properly, i've tested it with other things. Here's a screenshot of what I am getting -
https://imgur.com/a/pTfgGwk
I only want the html before the first element of tbody.
<table id="someid">
<thead>
<tr><td>USER</td><td>DATE</td></tr>
</thead>
<tbody>
<tr><td>aj0ob</td><td>06/05/2018</td></tr>
</tbody>
</table>
If you want to append a row before first row.
$('<tr><td>...</td><td>...</td></tr>').prependTo('tbody tr:first');
check out this fiddle https://jsfiddle.net/1s8m48t7/

Get ID of first cell in a specific table

Given,
<table id=ThisTable>
<tbody>
<tr>
<td id="ThisCell">
</td>
</tr>
<tr>
<td id="NotThis">
</td>
</tr>
<tr>
<td id="NorThis">
</td>
</tr>
</tbody>
</table
How can I use JQuery/Javascript to assign the ID of the first table cell in #ThisTable to the variable "Selected"?
The result in this case should look like:
var Selected = "ThisCell";
I need to get the first cell's ID without having any knowledge of what the ID is, probably using the :first selector. In addition, this isn't the only table on the page, so it must be referenced with its ID.
var Selected = $('#ThisTable td:first').attr('id');
This selects the first td element that is a descendant of the element with ID ThisTable, returns its id attribute and assigns it to Selected.
JSFiddle
Just:
$("#ThisTable tbody tr:first td:first").attr("id");
This code gets the first td of your table, then stores its id in a variable Selected.
var Selected = document.querySelector("#ThisTable td").id;
Pure DOM methods, fastest method here, and works on 91.71% of browsers according to Can I use.
$(function () {
console.log($($('#ThisTable').find('td')[0]).attr('id'))
});
http://jsfiddle.net/E9mPw/17/

jQuery append() div tag not working as expected

i'm having a problem with my append div.
here is a rough idea of my html
<table>
<tr>
<td>title 1</td>
<td>subject 2</td>
</tr>
<div id='appenddiv'></div>
<tr>
<td>title 2</td>
<td>subject 2</td>
</tr>
</table>
and my jquery script is this:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);
All works fine with the script and it fires when it should etc.. but my problem is, instead of placing the new html inside the div tags, it just adds it to the top of the table?
any idea why?
As moonwave99 said, you can't have a <div> as a direct child of your table element. If you always to add after the first row, you can do:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);
You can't have a <div> as a direct child of a <table> element, so it's rendered outside of it.
Your html structure is not valid. You shouldn't place a div between tr's. You should place it inside a td if you want it inside your table.
If you want to add another row to your table, you should place a tr instead of your div element, and append it's content, or you should use jQuery .after() or .before() to position your element at a specific position.
you can only append div inside a <td> if you want to have a div in a table otherwise you cannot just add <div> inside <table>
I think no need to assign a variable, you can put html code directly to after() method.
Below is the script:
$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");
Above script will always add new row after the first row.

JQuery update table cell and add new table rows

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

Highlighting columns in a table with jQuery

I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?
Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.
Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");
Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.
Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")
Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")
This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/

Categories