CODEWITHSUNDEEP
jquery
pobliska
pobliska

Reputation: 247

jQuery find element with id in row

I have a simple table, I'm trying to send text value from cells .name and .date into form using jQuery. This script works pretty well, but I don't know how find only text with class for example .name in only this row, where the user cliced on Book-button.

My table structure:

      <table id="myTable"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Date</th> 
    <th>Place</th> 
    <th>Price</th> 
    <th>Hours</th> 
    <th>Book</th> 
</tr> 
</thead> 
<tbody> 
      <tr> 
    <td class="name"><a href="#" title="title1">Camp1</a></td>  //send to form this value
    <td class="date">10.09 - 15.09.2014 r.</td>   //send to form this value
    <td>Brighton</td> 
    <td>555 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td>   //when user click on this button
</tr> 

          <tr> 
    <td class="name"><a href="#" title="title1">Camp2</a></td> 
    <td class="date">02.09 - 22.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>432 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr>     
<tr> 
    <td class="name"><a href="#" title="title1">Camp3</a></td> 
    <td class="date">23.09 - 27.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>123 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr> 
</tbody></table>

          </tbody> 
</table>

My script:

<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>

My form:

<fieldset id="contact_form" style="display:none;">
<div id="result"></div>
    <label for="name"><span>Name</span>
    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
    </label>

    <label for="email"><span>Email Address</span>
    <input type="email" name="email" id="email" placeholder="Enter Your Email" />
    </label>

        <label><span>&nbsp;</span>
        <button class="submit_btn" id="submit_btn">Submit</button>
        </label>
    </fieldset>
        <button c

lass="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>

Upvotes: 4

Views: 45723

Answers (6)

Muhammad Bilal
Muhammad Bilal

Reputation: 3018

Find elements with id in row and assign to other elements using jquery

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

Upvotes: 0

Patrick Grimard
Patrick Grimard

Reputation: 7126

Check out this jsfiddle http://jsfiddle.net/Dz24f/

Basically when you click a button, you need to get it's parent element, which is the row, then get siblings of that row with the given jquery selector.

$("button").click(function () {
    var _this = $(this);
    var text = _this.parent().siblings('.name').text();
    console.debug(text);
    $("#name").val(text);
    var date = _this.parent().siblings('.date').text();
    console.debug(date);
    $("#date").val(date);
});

Upvotes: 0

Xriuk
Xriuk

Reputation: 392

This ahould work.
$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 93003

http://api.jquery.com/category/traversing/tree-traversal/

$( "button" ).click(function() {
    var text = $(this).closest('tr').find('.name').text();
    $( "#name" ).val( text );
    text = $(this).closest('tr').find('.date').text();
    $( "#date" ).val( text );
});

Better yet, surround each button with a <form> with <input type="hidden"> elements containing that data, and it will work even without JavaScript enabled.

Upvotes: 13

Pluto
Pluto

Reputation: 3026

The problem is in your JavaScript. You need to target only what the user clicked. This can be done by using the this object in in the click callback function.

$( ".book button" ).click(function() {
    var tr = $( this ).parents('tr');
    $( "#name" ).val( tr.find('.name').text() );
    $( "#date" ).val( tr.find('.date').text() );
});

Other notes:

  • You can only use var to declare a variable once. Afterwards, use the variable without var.
  • // Cannot be used for commenting in HTML. You must use <!-- and -->

Upvotes: 2

RGS
RGS

Reputation: 5211

$("button").click(function() {
var text1 = $(this).closest('tr').find('.name').text();
alert(text);
$("#name").val( text1 );
var text2 = $(this).closest('tr').find('.date').text();
$("#date").val( text2 );
});

Demo:

http://jsfiddle.net/u68wJ/

Upvotes: 1

Related Questions