Replacing the content of a <td> with <tr> id and <tr> index - javascript

I have a table structure like this
<table>
<tr id="tr_1">
<td>Content1</td>
<td>Content2</td>
<td>Content3</td>
<td>Content4</td>
</tr>
<tr id="tr_2">
<td>Content5</td>
<td>Content6</td>
<td>Content7</td>
<td>Content8</td>
</tr>
<tr id="tr_1">
<td>Content11</td>
<td>Content12</td>
<td>Content13</td>
<td>Content14</td>
</tr>
<tr id="tr_2">
<td>Content15</td>
<td>Content16</td>
<td>Content17</td>
<td>Content18</td>
</tr>
</table>
I am passing the row index(2) and <tr> id (tr_1) to a js function for replacing the content of 2nd 3 rd td's in that row.
i have a jquery funcion
document.getElementById('tr_1').getElementsByTagName("td")[2].innerHTML = '<td>New html</td>';
But that this replacing the first tr html. How we can replace with id tr_1 with index 2

if you are using jquery .. then this should work..
$("#tr_1 td").eq(2).html("<td>New html</td>");
here is the link to eq()...
http://api.jquery.com/eq/

Try this
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#tr_1 td:eq(1)').html('Replacing Content of td 2');
$('#tr_1 td:eq(2)').html('Replacing Content of td 3');
});
</script>

You don't have unique ids. Is is essential for JavaScript that the DOM working with unique ids.
In jQuery you can use this to target the to tr elements with id set to tr_1:
$("tr[id=tr_1]");
To get the second element in these tr's you will need to use jQuery.fn.each
$("tr[id=tr_1]").each(function() {
$("td", this).eq(1).html("new html");
});

Try this:
jQuery("[id=tr_1]:eq(1) td:eq(1)").html("new html");
Note you need to insert the jquery plugin:
http://jquery.com/download/

Related

How to get a value of data-attribute with jquery

I need to get the value of userid, data-attribute from a html table and put this value into a var, but I wanna to this action without click action.
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
I have tried to do this like that, but the rowId is undefined.
var rowId = $("#someTest tr").last().attr("[data-userid"]");
Simply, you can manage data attribute & value in HTML tag using data() method of jQuery. Alternatively, you can use attr() method also,
var rowId = $("#someTest tr").last().data("userid");
Alternatively
var rowId = $("#someTest tr").last().attr("data-userid");
.data() method is used to store arbitrary data associated with the matched elements or return
the value at the named data store for the first element in the set of
matched elements.
Initial HTML
<button id="mybtn">MyButton</button>
Add data-attribute with value
$('button#mybtn').data('id',10);
Alternatively
$('button#mybtn').data('data-id',10);
Reproduced HTML
<button id="mybtn" data-id="10">MyButton</button>
Get value from data-attribute
alert($('button#mybtn').data('id')); //alerts 10
Alternatively
alert($('button#mybtn').attr('data-id')); //alerts 10
Change value of data-attribute
$('button#mybtn').data('id',15);
Alternatively
$('button#mybtn').attr('data-id',15);
Reproduced HTML
<button id="mybtn" data-id="15">MyButton</button>
Remove data-attribute
You can remove data attribute using removeData() method
$('button#mybtn').removeData('id');
Alternatively
$('button#mybtn').removeAttr('data-id');
Reproduced HTML
<button id="mybtn">MyButton</button>
only Remove [] :
var rowId = $("#someTest tr").last().attr("data-userid");
Final code :
<html>
<title>This is test</title>
<head>
</head>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var rowId = $("#someTest tr").last().attr("data-userid");
alert(rowId);
})
</script>
</body>
</html>
you just have to remove the square brackets:
var rowId = $("#someTest tr").last().attr("data-userid");
$('#rowidOutputAttr').text(rowId);
var rowId = $("#someTest tr").last().data("userid");
$('#rowidOutputData').text(rowId);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="tblList">
<tbody id="someTest">
<tr data-userid="801992084067">
<tr data-userid="451207954179">
<tr data-userid="310896831399">
<tr data-userid="863939754980">
<tr data-userid="1123542226482">
</tbody>
</table>
<div id=rowidOutputAttr></div>
<div id=rowidOutputData></div>
</body>
</html>
i also added en example with .data()

How to append td element in the same column of th element in a table?

I need to append data to a table dynamically from a JSON object.
After adding the titles as th elements, I am finding it difficult to add tr elements in the same column as the corresponding th element. Please help me.
{
"Category2":"Item2",
"Category1":"Item1",
"Category3":"Item3"
}
<table>
<th>Category1</th>
<th>Category2</th>
<th>Category3</th>
</table>
Now, I need to add items in td tags in the columns same as their corresponding th elements. like:
<table>
<th>Category1</th>
<th>Category2</th>
<th>Category3</th>
<tr>
<td>Item1</td>
</tr>
<tr>
<td>Item2</td>
</tr>
<tr>
<td>Item3</td>
</tr>
</table>
How can I do this using jQuery? (My problem is bigger than this. I simplified it so that it can be understood. Thank you!)
Here you go, Press Run code snippet and check if this works for you.
var nodes = {
"Category2":"Item2",
"Category1":"Item1",
"Category3":"Item3"
};
$(function(){
var th_elements = $('table').find('th'); // find <th> in HTML
th_elements.each(function(){ // Loop as much <th> found
var html = $.trim($(this).html()); // get HTML and compare with nodes key
$('table').append('<td>'+nodes[html]+'</td>'); // append data to table
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<th>Category1</th>
<th>Category2</th>
<th>Category3</th>
</table>

Jquery select tbody but not from nested tables

I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));

How to use loop in order to catch a tag name which has no specific attribute?

Please tell me two methods below to catch the <table> (line 3) which has no specific attribute like "id" or "class name" and input the first 3 rows <tr>something1</tr> <tr>something2</tr> <tr>something3</tr> with javascript.
Method 1: from the Top to the Bottom tag: div -> div -> table (subclass 3)
Method 2: from the Bottom to the Top tag: <table id="Hero-WPQ1"> up to <table> (line 3).
<div id="content_data">
<div>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>something1</tr>
<tr>something2</tr>
<tr>something3</tr>
<tr>something4</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="ms-bottompaging">
something
</table>
<table id="Hero-WPQ1">
something
</table>
</div>
You can use .eq():
var firstTable = $('#content_data table').eq(0);
or :eq() selector:
var firstTable = $('#content_data table:eq(0)');
or .first():
var firstTable = $('#content_data table').first();
Basically, there are many ways to help you to get the first table as long as it's the first table inside #content_data in your case
For method 2, you can use .siblings() along with :first selector:
var firstTable = $('#Hero-WPQ1').siblings(':first');
You can use .prev() method like:
$('#Hero-WPQ1").prev().prev()
which gives you first table want you to desired.
for <tr>something1</tr> you can:
$('#Hero-WPQ1').prev().prev().find('tr:first')

Check a table row cell for contents

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/

Categories