CODEWITHSUNDEEP
javascriptjqueryhtml
Mark Fondy
Mark Fondy

Reputation: 3923

First TD for next TD

I have:

<table>
    <tr class="here">
        <td class="first">first</td>
        <td class="next" par="http://google.com">next</td>
        <td class="next" par="http://stackoverflow.com">next</td>
    </tr>
</table>

live: http://jsfiddle.net/C5vSP/

i would like receive with jQuery:

<table>
    <tr class="here">
        <td class="first"><a href="http://google.com">first</a></td>
        <td class="next" par="http://google.com">next</td>
        <td class="next" par="http://stackoverflow.com">next</td>
    </tr>
</table>

This must get parameter par from first TD.next and make link in first TD with this parameter.

Is possible with jQuery? If yes, how?

EDIT: Thanks for answer. For all +1. I have one more problem:

<table>
    <tr class="here">
        <td class="first">first</td>
        <td class="next" par="http://google.com">next</td>
        <td class="next" par="http://stackoverflow.com">next</td>
    </tr>
        <tr class="here">
        <td class="first">first</td>
        <td class="next" par="http://yahoo.com">next</td>
        <td class="next" par="http://stackoverflow.com">next</td>
    </tr>
        <tr class="here">
        <td class="first">first</td>
        <td class="next" par="http://cnn.com">next</td>
        <td class="next" par="http://stackoverflow.com">next</td>
    </tr>
</table>

LIVE: http://jsfiddle.net/C5vSP/2/

This add for all .here link google.com instead of google.com, yahoo.com and cnn.com. I dont can modify html. I can use only jQuery. How can i make this correctly?

Upvotes: 2

Views: 499

Answers (3)

Gran
Gran

Reputation: 326

After your edit, is this what you want? Jsfiddle

$("tr.here").each(function (){//Iterate all the <tr/>
    var $html = $(this);
    var $firstTd =  $html.children(":first");//get the first td.
    var url = $firstTd.next().attr("par");//Get the first par value.
    $firstTd.wrapInner('<a href="'+url+'">');//Append the value.
})

Upvotes: 2

j08691
j08691

Reputation: 207901

How's this: jsFiddle

var url =  $('td.next:first').attr('par');
$('td.first').wrapInner('<a href="'+url+'">');

Upvotes: 7

EBarr
EBarr

Reputation: 12026

The selector will look like:

myTD = $('table tr.here td.next').filter(':first')

I would suggest chaing the parameter "par" to "data-par" so you can say take advantage of Jquery's data() function. The data function reads in any parameters that begin with "data-" Something like...

myvar = myTD.data('par');

I'm not entirely clear what you mean "make link in first TD with this parameter." But let's say you want to make the "next" inside the 2nd TD into a link...

myTD = $('table tr.here td.next')
newLink = '<a href="' + myvar + '">' + myTD.html() + '</a>';
myTD.html( newLink);

Upvotes: 3

Related Questions