CODEWITHSUNDEEP
javascriptjquery
Arbazz Hussain
Arbazz Hussain

Reputation: 1932

JQuery Accessing the previous tag text in <td>

I have a checkbox with id xxxx,I'm trying to access WaLia text from <td> from that checkbox so that i can make ajax request with that text.

<tbody style="border:1px solid transparent; background-color:#242424; color:#A1A6AB; text-align: left;">
  <tr>
    <td style="padding: 14px;">01</td>
    <td>WaLia</td>
    <td>[email protected]</td>
    <td>+1 222 555 6666</td>
    <td>Ontario, Canada</td>
    <td>
      <label class="switch">
      <input type="checkbox" id="xxxx">
      <span class="slider round"></span>
      </label>
    </td>
  </tr>
</tbody>

So far manage to do:

<script>
  $("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = $(this).prev().text(); // need "WaLia" here
      console.log(msg);
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });
</script>

Please note there are more <tr> objects are present within <tbody> & each has unique checkbox id.

Upvotes: 0

Views: 114

Answers (3)

Margulan Zharkenov
Margulan Zharkenov

Reputation: 458

You should pick the tr element and then pick the second child where the text located. Then do what you wanted.

var parent = $("#xxxx").parent(); // td element of your input
var grandParent = parent.parent(); // tr element
var element = grandParent.children().eq(2); // selecting the second child
console.log(element.text()); // your text

Hope it'll help you.

Upd.: If "xxxx" will be the same for every input don't use id. Use class cause id is used in unique cases and class for repeating elements.

HTML

<tr>
  <td style="padding: 14px;">01</td>
  <td>WaLia123</td>
  <td>[email protected]</td>
  <td>+1 222 555 1234</td>
  <td>Torrento, Canada</td>
  <td>
    <label class="switch">
      <input type="checkbox" class="xxxx"><!--use class, not id!-->
      <span class="slider round"></span>
    </label>
  </td>
</tr>

JS

$(".xxxx").click(function(e){
    if (e.target.checked){
      var parent= $(this).parent().parent(); // td element of your input
      var grandParent = parent.parent(); // tr element
      var element = grandParent.children().eq(2);
      console.log(element.text());
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });

Upvotes: 2

Karan
Karan

Reputation: 12629

You can use $(this).closest('tr').find('td:nth(1)').text() for fetching nearest tr then find nth td element inside that tr and then access its text.

Note Don't use $("#xxxx").click as it will only assign click event to first element with id xxxx. This is how id selector(#) works. You can use $("[id='xxxx'").click instead of that.

$("[id='xxxx'").click(function(e) {
  if (e.target.checked) {
    var msg = $(this).closest('tr').find('td:nth(1)').text(); // need "WaLia" here
    console.log(msg);
    //alert(1);
  } else {
    console.log('lol');
    //alert(2);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table>
  <tbody style="border:1px solid transparent; background-color:#242424; color:#A1A6AB; text-align: left;">
    <tr>
      <td style="padding: 14px;">01</td>
      <td>WaLia</td>
      <td>[email protected]</td>
      <td>+1 222 555 6666</td>
      <td>Ontario, Canada</td>
      <td>
        <label class="switch">
          <input type="checkbox" id="xxxx">
          <span class="slider round"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td style="padding: 14px;">01</td>
      <td>WaLia123</td>
      <td>[email protected]</td>
      <td>+1 222 555 1234</td>
      <td>Torrento, Canada</td>
      <td>
        <label class="switch">
          <input type="checkbox" id="xxxx">
          <span class="slider round"></span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

AnonymousSB
AnonymousSB

Reputation: 3604

It sounds like you want to use a css selector to get to your element. Assuming the value you want is always in the second td, this should work.

$(this).parent().parent('td:nth-child(2)');

Of course, it would be a lot more reliable if you can put an ID on your element that contains the text and use getElementById instead, that way your code isn’t super brittle, vulnerable to breaking with the slightest change of the HTML structure.

Better yet, if you’re generating this HTML, you could just assign the value of your checkbox to be the same as the visible value to the user, then you can just use e.target.value

<input type="checkbox" value="WaLia" id="xxxx" />

$("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = e.target.value
      console.log(msg);
    } else {
      console.log('lol');
    }
});

Upvotes: 1

Related Questions