How to select cell using jQuery id selector - javascript

I am getting ID of table cell using the following Javascript
var tempCell = e.target.parentNode.id;
Now I have to append a table in tempCell using jQuery like that
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(???).append(htmlToAppend);
I am not sure how to write the syntax to use id for the purpose to add table in td. What to write in place of question mark to add table in tempCell

You have to give id to td in id selector. Before id you need to give #
$('#idoftd').append(htmlToAppend);
If you can get the element by e.target.parentNode then you can pass it to jQuery method to make jQuery object out of it.
$(e.target.parentNode).append(htmlToAppend);

use escaping rule from selector http://api.jquery.com/category/selectors/
$('#e\\.target\\.parentNode\\.id').append(htmlToAppend);
or
$('[id="e.target.parentNode.id"]').append(htmlToAppend);
update:
$('#'+e.target.parentNode.id).append(htmlToAppend);
or
$('#'+tempCell ).append(htmlToAppend)

From the looks of it you are trying to append the element to the current elements parent so
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(e.target.parentNode).append(htmlToAppend);

easy way : keep an id or class attribute to the table cell like for example say
<td id="tablecellid">
now if you want to append anything keep it in a variable for readability
var data = ''
and do the following
$("#tablecellid").append(data);

Assuming your cell looks like this:
<td id='myfavcell'></td>
you would call
$('#myfavcell').append(htmlToAppend);
as jquery uses the css selector type (#) for locating element IDs.

Related

Change id of clone children in jQuery

I have a table on which I have a hidden line that I clone in order to add new lines dynamically.
var $clone = $('#table-invoicing').find('tr.hide').clone(true).removeClass('hide');
$('#table-invoicing').find('table').append($clone);
Each line have a id and a data-type.
The hidden line is set an id ending in 99.
I would like to change this id when I clone the hidden line.
I found similar topics, but for some reason I don't manage to include it in my script. When I clone the line, then there is 2 elements with same id, so a selector by id won't work.
I tried :
$clone.$('#invoicing-row-descr-99').attr("id", "newID");
but then it tells me that $clone is not a function.
Any idea ?
$clone.$('#invoicing-row-descr-99').attr("id", "newID");
but then it tells me that $clone is not a function.
Because $clone is an object. Just use attr or prop for the cloned element:
$clone.attr("id", "newID");//change cloned element id
As per your comment, use like this:
$clone.find('your_element').attr("id", "newID");
.prop() Is a good practice in current versions of jQuery.
$clone.prop("id", "yourId");
You'll need to use it before you are appending it.

id to fields in jquery

I have a table and I have multiple text boxes in a column.I am add rows to the table using jquery clone method
var row = $('#nameTable tbody>tr:last').clone(true);
Now I want to add ids to the text fields of the new row.
Any help?
Just add attribute id to that new row object.
$(row).find('input').attr("id","newId");
Docs of attr()
note: Considering only one input element is there in your new object. If multiple input elements are there, you have to loop on them and have assign individual id's to them, Since Id must be unique.
Try with this
var row = $('#nameTable tbody>tr:last').clone(true);
row.find("#someInput").attr("id","someInput_2");
Since you referring to text fields you can make use of this selector
$(row).find('input[type=text]').each(function(element) {
element.attr("id","newId");
})
For set multiple IDs use (be careful, because ID must be unique):
var row = $('#nameTable tbody>tr:last').clone(true);
row.find(':text').each(function () {
this.id = 'new_id' + Math.random();
});
I prefer access to ID via pure javascript instead of jquery http://jsperf.com/browser-diet-this-attr-id-vs-this-id/12

Tablesorter: change id after sort

In my table i have an [object HTMLInputElement] and i would like to change the id of this element. But this doesn't work:
`function BindFunctions() {
$('table[id*="tbl_main"]').tablesorter();
$('table[id*="tbl_main"]').bind("sortEnd",function() {
var table = document.getElementById('<%=tbl_main.ClientID%>');
for (var i = 0, row; row = table.rows[i]; i++) {
var e = row.cells[0].firstChild;
e.id= '5';
}
});
};`
Can anyone help me ?
Without seeing the related markup, it's very hard to help. But my guess is that the first child of the cell is a text node rather than an element. The DOM firstChild property gives you the first node, which may or may not be an element. For instance, if your table row looks like this:
<tr><td>Foo</td></tr>
...then row.cells[0].firstChild is a text node containing the text "Foo".
Also note that your code, as quoted, will create an invalid DOM structure: You cannot use the same id on more than one element in the document. You're trying to give the id value "5" to the first child element of each row. id values must be unique.
Further, it looks like you're using jQuery (although you haven't tagged the question jquery). I'll just mention that while "5" is a valid id value for HTML, it is not a valid id value for CSS, and since jQuery uses CSS-style selectors, it's problematic to use invalid CSS id values with jQuery.

Change text of specific <a> text using jQuery

I have an asp:Repeater that makes a table with a few <td>s and <tr>s. In each of the <tr>s, I have an <a></a>.
Now, on a certain event I want to change just the <a></a> tag in the <tr>.
So, I want to do something like:
$("a").text("I changed!");
, but I only want to change the <a>.text in one <tr>, not all the <a> elements on the page.
I am experimenting with .closest(), but unfortunately don't know enough about jQuery to make this functional.
if you have the target tr somehow, then you can use the following code to find the a tag inside that:
tr.find("a").text("text here");
How to find tr really depends on what context you are in and how your target tr is identified from others.
e.g. if it's the "first" tr you may say:
var tr = $("tr").first();
if it's the element that the event has happened for (e.g. click event):
var tr = $(this);
if you are in the event of a child element of target tr you may say:
var tr = $(this).closest("tr");
You should mark the <tr> with an Id so that you could identify it and then change the containing
So for example you could mark your <tr> with id 'myid' and do something like this in jquery:
$("#myid a").text("I changed!");
Or if you dont want to mark it with an Id then, you could use selectors if you know which it is.
For example getting the first would be:
$("tr:first a").text("I changed!");
Some references:
http://api.jquery.com/first-selector/
http://api.jquery.com/category/selectors/

Using JQuery .append() to dynamically change table layout

I am using an HTML table but I want to dynamically change the layout of the table based on the browser size. My basic code looks like this:
<tr>
<td class="row">E1</td>
<td class="row">E2</td>
<td class="row">E3</td>
<td class="lastRow">E4</td>
</tr>
Then the JQuery should calculate the number of rows and insert row-breaks accordingly.
My JQuery looks like this for now:
$('td.row').append('</tr><tr>');
Yet, its still displaying all the elements on one line. Any idea why?
This is a perfect place to use fluid CSS layouts.
Instead of writing lots of crazy Dom-manipulating javascript, simply replace your TD tags with divs and have them float:left
Further- append does not do what you think it does. It's dom manipulation and not string manipulation- you can't use it to directly change HTML the way you're thinking.
Further reading
Try looking at .after(); function:
http://api.jquery.com/after
i think that you need to try with this selector
Asumming that your table haved an id called example try like this
$("#exmaple tr:last").append('<tr></tr>');
$('</tr><tr>').insertAfter('.row');
You'd want to do your append on the tr element, not on td.row
You need to not think in terms of constructing HTML markup. There's no way to splice a closing/opening </tr><tr> into the DOM (without some ugly .innerHTML hacks).
Instead, create a new row after the current row, and the relocate the cells into that new row.
var row_cells = $('td.row').slice(1);
row_cells.each( function( i, el ) {
$('<tr>').insertAfter( row_cells.eq(i).parent() )
.append( row_cells.eq(i) );
});
DEMO: http://jsfiddle.net/EDf5a/
Or maybe you wanted a new row for each cell:
var row_cells = $('td.row');
var row = row_cells.parent();
row_cells.each(function(i, el) {
$('<tr>').insertBefore(row)
.append(row_cells.eq(i));
});
DEMO: http://jsfiddle.net/EDf5a/1/

Categories