new_Url:
<td class="posts column-posts">2</td>
old_url:
<span class="view">View</span>
I want to replace the old url by new_url..
var new_url = $("td.column-posts").find("a").attr('href');
$("span.view").find("a").attr('href',new_url)
I can't get the value of new_url.
PLease help. Thanks
Here's the complete structure for New_url:
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1</td>
</tr>
</tbody>
You can do like this, just make the ids for links:
$('#2').attr('href', $('#1').attr('href'));
Here is fiddle. http://jsfiddle.net/Goodluck/PasNk/1/
Enclose tbody inside table tag
<table>
<tbody id="the-list" data-wp-lists="list:tag">
<tr id="tag-7" class="alternate">
<td class="posts column-posts">1
</td>
</tr>
</tbody>
</table>
Working Fiddle
If there is only one td with class column-posts
var new_url = $("td.column-posts a").attr('href');
$("span.view a").attr('href',new_url)
If there is multiple .column-posts td then you have to write in each like
$("td.column-posts a").each(function(){
$("span.view a").attr('href',new_url) //you have to map each span to each a
})
Related
I have the following structure in my HTML in an angular 7 application:
What I am trying to do is to call the GetContent() function on click of any of the text inside the div. I am able to get the $event as "Liquidity" when I click on the text but if I click on any empty space between the text, the $event is empty. I tried every possible permutation of changing the location of the function call and id but same issue. Can anyone let me know what is wrong.
<tr (click)="GetContent($event)">
<td>
<table>
<tbody>
<tr>
<td>
<div id="Liquidity"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
Because there is no content in your TR's and TD's, its not creating a space at all. Look at my code, I have added padding for table row's ,table and table data tags
<table>
<tbody>
<tr (click)="GetContent($event)" >
<td style="padding:20px;background:red">TD
<table style="padding:20px;background:green">Table
<tbody>
<tr>
<td style="padding:20px;background:blue">TD
<div id="Liquidity" style="padding:10px;background:green"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
</tbody>
</table>
example stackblitz
Do it this way ,
UPDATED
<table>
<tbody>
<tr>
<td>
<div id="Liquidity" (click)="GetContent($event)"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
ts file
GetContent(event) {
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue;
console.log(value) //you will get liquid here.
}
Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();
jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());
If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!
I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!
Here is the code I want to process using javascript / jquery
EDITED THE BELOW CODE BLOCK FOLLOWING THE COMMENTS
<table>
<tbody>
<tr class="promote">
<td>1</td>
<td><span class="team_logo visible-lg visible-sm" style=""></span><a class="team_name " href="/team/show/7473/Power-Hiters">Power Hiters</a><span class="online" title="user is online"></span></td>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
<td style="text-align:center">5</td>
<td style="text-align:center">0</td>
<td style="text-align:center">0</td>
<td style="text-align:center">6.713</td>
</tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
</tbody>
</table>
I want to get the inner content/html of each <td> tag in a array using javascript / jquery
Extra Info:
When I tried it seems jquery strips the td and tr tags.
Actual thing I want to do is extract td in a multi dimensional array for each tr
the table structure:
<table>
<tbody>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
</tbody>
</table>
Since you want a multidimensional array, you will need to:
Make an array that will hold all table data
Iterate through all tr and create an array per row
Push that array in the first one, that holds all table data.
something like this:
var tableContent = [];
$('table tr').each(function(){
var trcontent = [];
$('td', this).each(function(){ trcontent.push($(this).text()); });
tableContent.push(trcontent);
})
console.log(tableContent);
example in jsfiddle
Try,
var arr = $("#cache").find('td').map(function(){ return this.textContent; }).get();
<table id="table" border="1">
<tr>
<td>
<table border="1">
<tr>
<td>aaa</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>bbb</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>ccc</td>
</tr>
</table>
</td>
</tr>
</table>
<span id="append">append</span>
$('#append').click(function(){
$('table#table tr').append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
How can I use jQuery's append function on only the first element? When I use append here, it appends all subtables. I would only like to append the first subtable. I tried with the > selector, but it is not working. How can I achieve this effect?
LIVE DEMO
Try this:
$('#append').click(function(){
$('table#table tr').first().append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
You can use the first() method:
$('#append').click(function(){
$('table#table tr').first().append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
Although that makes invalid HTML.. I think what you mean to append is:
<td><table><tr><td>ddd</td></tr></table></td>
JSFiddle
$("#table table tr:first").after('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
Tested Live DEMO
Take a look at the jQuery first-child selector
If I've understood your requirements, the below should work. Note that I am appending to the first sub-table, as you cannot have a tr as a direct child of a tr (which is why you were ending up with another nested table.
$('#append').click(function(){
$('#table table:first').append('<tr><td><table><tr><td>ddd</td></tr></table></tr>');
})
Updated fiddle
Try $('table#table tr:first-child')
How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>
Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});
JS FIDDLE LINK
Your given code is working properly. see this jsfiddle.