CODEWITHSUNDEEP
jqueryhtml-table
Kani R
Kani R

Reputation: 189

How get the selected value in table

Here I am using table. Here I want to take two values:

  1. state
  2. status

Here first row I select status two means I got correct answer like state is TN and status 2, suppose I select three means I will get stats TN and status 3, now coming to second row now I select status is two but I'm getting answer state is KAR (this is correct), but status is 1 (this is wrong)

function checkbox(_this) {
  alert($(_this).closest('tr').find('#state').text());
  var p_status = $('.status :selected').val();
  console.log(p_status);
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <table>
    <tr>
      <td id="idVal"> 1 </td>
      <td id="state"> TN </td>
      <td class="status">
        <!--<input type="checkbox" onchange="checkbox(this)"/>-->
        <select class="form-control"  onchange="checkbox(this);" style="width:150px;">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
        </select>
      </td>
    </tr>
 
    <tr>
      <td id="idVal"> 2 </td>
      <td id="state"> KAR </td>
      <td class="status">
        <!--<input type="checkbox" onchange="checkbox(this)"/>-->
        <select class="form-control"  onchange="checkbox(this);" style="width:150px;">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
        </select>
      </td>
    </tr>
  </table>

Upvotes: 0

Views: 794

Answers (2)

Akash Tomar
Akash Tomar

Reputation: 970

function checkbox(_this)
	{
  alert($(_this).closest('tr').find('#state').text());
  var p_status = $('.state :selected').val();
  console.log(p_status);
  } 


function checkbox_status(_this)
	{
  alert($(_this).closest('tr').find('#status').text());
  var p_status = $('.status :selected').val();
  console.log(p_status);
  } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>

	<tr>
	
	<td id="idVal">
	  1
	</td>
	
	<td id="state">
      TN
    </td>
	
	<td class="state">
     <!--<input type="checkbox" onchange="checkbox(this)"/>-->
	<select class="form-control"  onchange="checkbox(this);" style="width:150px;">
		<option value="1">one</option>
		<option value="2">two</option>
		<option value="3">three</option>
	</select>
    </td>
    </tr>
 
    <tr>
    <td id="idVal">
      2
    </td>
	
	<td id="status">
      KAR
    </td>
	
	<td class="status">
    <!--<input type="checkbox" onchange="checkbox_status(this)"/>-->
	<select class="form-control"  onchange="checkbox_status(this);" style="width:150px;">
		<option value="1">one</option>
		<option value="2">two</option>
		<option value="3">three</option>
	</select>
    </td>
	
    </tr>
  </table>

Upvotes: 2

Jai
Jai

Reputation: 74738

I suppose you should use this one: 

function checkbox(_this){
  var p_state  = $(_this).closest('tr').find('#state').text(); // get the text
  var p_status = _this.value; // get the selected value
  console.log(p_status);
}

In your code the issue was that a jQuery class selector returns a list of all found items. So, you have to be in your selector's context with this.

Upvotes: 0

Related Questions