Get Value From table when on Click of Button using jQuery

Question

This is my Code as given below. Here table shows date time string and Close button. When i click on close button it removes concern row. but before removing i need date in variable.

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr #newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

Albeis · Accepted Answer · 2017-06-26 12:14:45Z

1

Change id by class. Id is unique. Use find after Closest().

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('.newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

edited Jun 26, 2017 at 12:14

answered Jun 26, 2017 at 12:05

Albeis

1,6002 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ADyson Over a year ago

if the table happens to be nested within another table, parents() will find multiple <tr>s. So it can't be relied on in this scenario. closest() would be a better fit.

Albeis Over a year ago

that's true, but in this case there is only one table. Regards

ADyson Over a year ago

In the example, yes, but it's only a snippet. You don't know what the rest of the page looks like, or whether this is going to be part of a plugin which could be appended anywhere in another page. It's good practice to make the code as foolproof as it can be.

ADyson Over a year ago

you should always try to visualise beyond what you can see, and anticipate the things that others don't expect or predict ;-) Sounds like a grand statement, yes? But this example is a good, simple practical application of such a principle.

Albeis Over a year ago

Thanks for sharing then. I will apply it later :) Regards

|

RJParikh · Accepted Answer · 2017-06-26 12:06:44Z

Use $(this).closest('tr').find('#newdate').val()

Check below code:

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('#newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

ADyson · Accepted Answer · 2017-06-26 12:07:11Z

You have 2 problems:

1) HTML IDs must be unique, so your second "newdate" element can never be found - JavaScript considers it invalid and will ignore it.

2) closest() only searches up the DOM, so it will find the tr, but cannot then go back down again to find "newdate".

This should fix it:

$(document).on('click', 'button.removebutton', function() {
  var tr = $(this).closest('tr');
  var alpha = tr.find(".newdate").val();
  alert(alpha);
  tr.remove();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
</table>

Note the use of classes instead of IDs for "newdate" and "newtime", and that we split the process of locating the textbox into two steps - one to find the enclosing <tr> by going up the DOM, and a second to search back down from that location for the .newdate element.

Kiran Dash · Accepted Answer · 2017-06-26 12:10:58Z

.closest() finds the nearest parent element, #newdate is not a parent of the .removebutton element. You need the closest tr which in this case is the parent of .removebutton and then find the #newdate element which comes under the same tr as the .removebutton.

Additional Point: IDs must be unique. So instead of having same Ids, it is better to have classes.

SOLUTION:

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr').find('.newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

Abhijeet · Accepted Answer · 2017-06-26 12:19:47Z

Hi you can use below code but remember never use same id names in different input so you can use class for that and your code is

$(document).on('click', 'button.removebutton', function() {
  alpha = $(this).closest('tr').find(".newdate").val();
  beta = $(this).closest('tr').find(".newtime").val();
  alert(alpha);
  alert(beta);
  $(this).closest('tr').remove();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" class="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
</table>

$(document).on('click', 'button.removebutton', function () {
	alpha = $(this).closest('tr #newdate').val();
	alert(alpha);
    $(this).closest('tr').remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule">	
	<tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-26">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="06:00">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="newdate" id="newdate" value="2017-06-28">
    </td>
    <td>
      <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30">
    </td>
    <td>
      <button type="button" class="removebutton">X</button>
    </td>
  </tr>
<tr>
</table>

Collectives™ on Stack Overflow

Get Value From table when on Click of Button using jQuery

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related