Select only one checkbox at a time within a table and obtaining the data of the row marked using jquery

Question

Select only one checkbox at a time within a table and obtaining the data of the row marked using jquery

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I'm just trying to select a checkbox while it is inside a table and get the data in the row. This is my table:

<div class="table-container">
  <table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
    <thead class="backGris-light-be">
      <tr class="s20">
        <th class="no-borders">RESERVACION</th>
        <th class="no-borders">NOMBRE</th>
        <th class="no-borders">LOC_EXTERNO</th>
        <th class="no-borders">PICKUP</th>
        <th class="no-borders">RETURN</th>
        <th class="no-borders">CANAL</th>
        <th class="no-borders">AUTO</th>
        <th class="no-borders"></th>
      </tr>
    </thead>
    <tbody class="backWhite">
      <tr class="s18 colorGrayLight">
        <td class="no-pad-top no-pad-bot align-middle">1</td>
        <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
        <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
        <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">Web</td>
        <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
        <td class="no-pad-top no-pad-bot align-middle">
          <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
            <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
            <label class="s18 text-normal"></label>
          </div>
        </td>
      </tr>
      <tr class="s18 colorGrayLight">
        <td class="no-pad-top no-pad-bot align-middle">2</td>
        <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
        <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
        <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">Web</td>
        <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
        <td class="no-pad-top no-pad-bot align-middle">
          <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
            <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
            <label class="s18 text-normal"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I have not been able to perform this functionality. I hope your help with some link of how I can do it.

javascript jquery html css

asked by Pedro Misael Canche Angulo 29.05.2018 в 15:36

source

2 answers

1

By parts:

Your checkboxes should have a unique id . In this case you have the two with the id="tableid"

Seeing the question tag I understand you're using jQuery, right?

In that case you could assign the click event to the checkboxes that start with a id concrete (for example "chk_").

What information from the table do you want to obtain?

Following with jQuery you can find the row ( tr ) closest to the checkbox with the method closest("tr")

Select only one checkbox:

$ ("input [id ^ = 'chk _']"). not (this) .prop ('checked', false);

I'll give you an example with all this:

$(function(){

$("input[id^='chk_']").on("click",function(){

   $('input[type="checkbox"]').not(this).prop('checked', false);

   if($(this).is(':checked'))
   {
      obtenerFila(this);
   }
});

});

function obtenerFila(ctl)
{
	alert($(ctl.closest("tr")).html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-container">
<table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
<thead class="backGris-light-be">
    <tr class="s20">
      <th class="no-borders">RESERVACION</th>
      <th class="no-borders">NOMBRE</th>
      <th class="no-borders">LOC_EXTERNO</th>
      <th class="no-borders">PICKUP</th>
      <th class="no-borders">RETURN</th>
      <th class="no-borders">CANAL</th>
      <th class="no-borders">AUTO</th>
      <th class="no-borders"></th>
    </tr>
</thead>
<tbody class="backWhite">
  <tr class="s18 colorGrayLight">
    <td class="no-pad-top no-pad-bot align-middle">1</td>
    <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="chk_1" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
  <tr class="s18 colorGrayLight"> 
    <td class="no-pad-top no-pad-bot align-middle">2</td>
    <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="chk_2" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
</tbody>
</table>
</div>

answered by 29.05.2018 в 15:53

C # Does not execute stored procedure + trigger Make a chain of if and pick up a value for a variable when it meets the conditions

score 3 · Accepted Answer

With the change event we can control the value changes of the form elements, in this case your checkbox , we are simply going to ask that when a checkbox is active automatically the rest are deactivated and the information of the elements corresponding to the row to which the active checkbox belongs.

Now to capture this information, what we will do is select the tr to which the checkbox belongs and then we will capture the content of each td , one by one.

$(document).ready(function(){
    $('input[type="checkbox"]').change(function(){
        if($(this).is(':checked')){
            $('input[type="checkbox"]').not(this).prop('checked', false);
            
            var tr = $(this).closest('tr');
            
            var reservacion =$(tr).find('td:nth-child(1)').text();
            var nombre = $(tr).find('td:nth-child(2)').text();
            var loc_externo = $(tr).find('td:nth-child(3)').text();
            var pickup = $(tr).find('td:nth-child(4)').text();
            var retorno =$(tr).find('td:nth-child(5)').text();
            var canal = $(tr).find('td:nth-child(6)').text();
            var auto = $(tr).find('td:nth-child(7)').text();
             
            console.log('reservacion: ' + reservacion + ' - nombre: ' + nombre + ' - loc_externo: ' + loc_externo + ' - pickup: ' + pickup + ' - retorno: ' + retorno + ' - canal: ' + canal + ' - auto:' + auto);
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-container">
<table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
<thead class="backGris-light-be">
    <tr class="s20">
      <th class="no-borders">RESERVACION</th>
      <th class="no-borders">NOMBRE</th>
      <th class="no-borders">LOC_EXTERNO</th>
      <th class="no-borders">PICKUP</th>
      <th class="no-borders">RETURN</th>
      <th class="no-borders">CANAL</th>
      <th class="no-borders">AUTO</th>
      <th class="no-borders"></th>
    </tr>
</thead>
<tbody class="backWhite">
  <tr class="s18 colorGrayLight">
    <td class="no-pad-top no-pad-bot align-middle">1</td>
    <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
  <tr class="s18 colorGrayLight"> 
    <td class="no-pad-top no-pad-bot align-middle">2</td>
    <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
</tbody>
</table>
</div>

<div id="mensaje"></div>