Get the exact child Table using Jquery - javascript

I have a situation here...
I have two div's content1 and content2,each div has a table also...
so i get each table like this
$("#content1 table")
or
$("#content2 table")
but I want Like this
var x="#content1" or "#content2"
then something like this
$(x "table")
i.e pass the id to a variable and get the table... any solution?

var x= document.getElementById('content1');
$(x).find("table");
try this one

The answer lies in the example you gave itself. Just have to modify it slightly
var x="#content1"; //whatever the name of the parent is
$resulting_table = $(x+" table")
Hope that helps.

You can combine selector using comma by Multiple Selector (“selector1, selector2, selectorN”)
$("#content1 table, #content2 table")
Alternatively you can assign common class to table with #content1 and #content2
$('.common-table-class')

Try to use the context i.e] $('selector',context),
var x= "#content1";
var table = $('table', x);
And the above code is very much similar to,
var x= "#content1";
var table = $(x).find("table");

use find function $(x).find("table")

Use find to get the table
$(x).find("table");

For more simplicity:
$(x + " table");

Related

Get text value of html elements with same #Id

<a id="s_6_2_19_0_mb" class="siebui-ctrl-drilldown" name="Name" rowid="1" href="javascript:void(0)">00102400010630001</a>
<a id="s_6_2_19_0_mb" class="siebui-ctrl-drilldown" name="Name" rowid="2" href="javascript:void(0)">00102402608820001</a>
I need to get the text values of both these elements. so I use the following code:
$('a#s_6_2_19_0_mb[rowid="1"]').text();
$('a#s_6_2_19_0_mb[rowid="2"]').text();
But the #Id will differ from page to page. So I am getting the id in a variable, say "idVal". And idVal = s_6_2_19_0_mb. So now to get the text value I used the below code
$('\'a' +'#'+idVal+'\[rowid\=\"1\"]'+'\'').text();
But this throws me an error. Please let me know how to extract the text value using a variable for #id in the above case
Well, as others have said IDs must be unique, but if you really can't change that (and assuming classes and rows may differ), then you could do:
$("a[id='"+idVal+"'][rowid='1']").text();
You may simplify your selector and remove the a and use the following code where rowId holds the id of the row you wish to retrieve:
var linkText = $('#'+ idVal +'[rowid=\"'+ rowId +'\"]').text();
or just hardcode the row id like that:
var link1Text = $('#'+ idVal +'[rowid="1"]').text();
var link1Text = $('#'+ idVal +'[rowid="2"]').text();
Cheers,
Id be unique in HTML so use class instead of id
$(".siebui-ctrl-drilldown[rowid = 1]").text();
$(".siebui-ctrl-drilldown[rowid = 2]").text();
You don't need to escape the =, nor the "s, and you have an uneven number of quotes.
So you should have something like this:
$('a' +'#'+idVal+'[rowid="1"]').text();
Oh and yeah, as everybody else said, IDs should always be unique. Trying to access multiple elements with the same ID will always return the first one.
You should never have same IDs for multiple elements on same page. however You can use class selector to target them:
$("a.siebui-ctrl-drilldown[rowid=1]").text();
$("a.siebui-ctrl-drilldown[rowid=2]").text();
like that:
$('a#' + idVal + '[rowid="1"]').text();
However you have to avoid same id in DOM
You can simply use this:(Remove ids with same value)
$("a[rowid=1]").text();
$("a[rowid=2]").text();

jquery grabs the value null instead of correct one from the cell of dynamically created table

I want to update my table row dynamically for which I should grab the value of table cell using jquery. The problem is that the grabbed value is null instead of "Title". Could you please check my code below and help me to find the mistake. I have researched and found out that I should use text() instead of html() but still could not get the result.
$.each(data.results, function(i, res) {
var row = $('<tr>').append(
$('<td>').html(res.id),
$('<td class="title" contenteditable="true">').html(res.title),
$('<td>').html('Update')
);
item.append(row);
});
$("#show").html(item);
$("body").on("click", ".update", function() {
var self = this;
var id = $(self).attr("name");
var title = $(self).closest(".title").text(); //cannot grab the value,
...
I found the answer. It should be
var title = $(self).closest('tr').children('td.title').text();
closest looks for the match in the parent elements , you should use siblings instead ...
UPDATE
one of these should work based on the code u provided, if they don't you need to provide the generated html or at least the complete code you using ...
$(this).closest('td').siblings('.title').text();
$(this).closest('tr').find('.title').text();
$(this).parent().prev().text();
... and some other methods
the reason why $(this).siblings('.title').text() doesn't work is because this is <a> not <td> witch doesn't have a sibling

How do I combine javascript variable to jquery selector?

I am trying to get the table td texts by using Jquery and javascript
I have the following
//tables contain bunch of tables
for(var i = 0; i < tables.length ; i ++){
var table = tables[i];
$(table 'td').each(function(){ //I know there is something wrong with my selector.
$(this).text()
})
The jquery selector doesn't work in my case. How do I select every td for different table?
Thanks for the help!
I think you want to use the .find() method:
$(table).find('td').each(function(){
DEMO: http://jsfiddle.net/jfj47/
Of course, an alternative is to use the "context selector":
$("td", table).each(function(){
DEMO: http://jsfiddle.net/jfj47/1/
Also, if tables is just an array (or array-like object) of DOM elements, you don't have to loop and could use:
$(tables).find("td").each(function(){
DEMO: http://jsfiddle.net/jfj47/2/
References:
find(): http://api.jquery.com/find/
context selector: http://api.jquery.com/jQuery/

How to check if a table has a row with a specific id jquery

How do I check if a table contains a row with a specific id using jQuery?
Just
if($('#rowID').length){
}
should be sufficient..
ID's on a page are unique.. So this check should do..
if ($('table#uniqueID').find('#rowID').length > 0) {
Once you have the table, it's easier and faster without jQuery.
var table = $('table')[0];
if (table.rows["theId"])
alert("Has the row!");
DEMO: http://jsfiddle.net/wUKyk/
if ($("#elementID").length) { ... }
ID's are unique, so just checking if the ID exists with length is enough
var hasRowX = $table.find('#rowX').length;
To extend on the answer given by 'I Hate Lazy', this also works if the row in question has a 'name' attribute instead of an 'id'. I.e.:
var table = $('table')[0];
if (table.rows["theName"])
alert("Has the row!");

Getting the last row of a table using jQuery?

I'm dynamically creating table rows. So each time I add a row, I need to get the ID of the last <tr> so that I can create a new <tr> with ID = "(the last row's ID) + 1". Is there any way to get the last row's ID using jQuery?
$('#yourtableid tr:last').attr('id');
Old question, but here's a different way using JQuery traversal which is a bit quicker:
$("#TableId").find("tr").last();
An alternative method to ID your rows, if they are all sequential is just to get the number of rows + 1.
$("#TableId").find("tr").length + 1
var id = $('table tr:last').attr('id');
2019
As of jQuery 3.4.0 :last is deprecated, use .last() instead, like this:
var id = $('#mytable tr').last().attr('id');
var tid=$('#tableid tr:last').attr('id');
alert(tid);
There are two methods and they both work $('#tableid tr:last') and $('#tableid tr').last()
You don't need to use jQuery for that. You can handle it in CSS counters. The counters automatically increments the index values and it also handles the rearrangement of numbers in case a row is deleted from the midst. The CSS counters can be implemented as follows. Insert it into your CSS file that take care of the styles of the HTML table.
#yourtableid tbody
{
counter-reset: tablerow;
}
#yourtableid tbody .yourHTMLcellclass::before
{
counter-increment: tablerow;
content: counter(tablerow)". ";
}
Last row id of table
var lastid = $('table tr:last').attr('id');
var str = lastid .replace(/[^0-9]+/ig,"");
I was looking for a Vanilla javascript solution and this question is the first Google result, so here is the solution without Jquery :
let table = document.getElementById('myTable') ;
let lastLine = table.rows[table.rows.length-1];

Categories

Resources