HTML table problem with radiobutton

Question

HTML table problem with radiobutton

Navigation

#1 by (4 votes)
#2 by (2 votes)

0

I have an HTML table with several rows, each row has a radiobutton, I try to make each row like a link, that is to say that it changes color when it is selected and its radiobutton is selected to obtain the id associated with the radiobutton, I have only I could make each row of the table as a link How could I do it?

<script type="text/javascript">
$(".desmarcado").click(function () {
   $("#intereses").prop("checked", true);
      $(".desmarcado td").each(function (index) {
        alert($(this).text());
                    
        });
});
</script>

and my table is this

        <table id="table" class="table">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <!--<th></th>-->

                </tr>
            </thead>
            <tbody>
                <tr style='cursor:pointer' class='desmarcado'>
                        <td><input id="intereses" name="intereses" type="radio" value="1" /></td>
                        <td>Persona 1</td>
                </tr> 
            </tbody>
        </table>

jquery html

asked by Drago25 26.02.2016 в 21:44

source

2 answers

2

This would be a solution:

$("#table tr").click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');    
   alert("El valor del botón seleccionado es: " + $(this).find('input:first').val());
});

.td {border: 1px #00F solid; padding: 10px; cursor: pointer;}
.selected {
background-color: blue;
color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table id="table" class="table">
        <thead>
            <tr>
                <th></th>
                <th></th>

            </tr>
        </thead>
        <tbody>
            <tr style='cursor:pointer' class='desmarcado'>
                    <td><input id="intereses" name="intereses" type="radio" value="1" /></td>
                    <td>Persona 1</td>
            </tr> 
            <tr style='cursor:pointer' class='desmarcado'>
                    <td><input id="intereses" name="intereses" type="radio" value="2" /></td>
                    <td>Persona 2</td>
            </tr> 
            <tr style='cursor:pointer' class='desmarcado'>
                    <td><input id="intereses" name="intereses" type="radio" value="3" /></td>
                    <td>Persona 3</td>
            </tr> 
                            <tr style='cursor:pointer' class='desmarcado'>
                    <td><input id="intereses" name="intereses" type="radio" value="4" /></td>
                    <td>Persona 4</td>
            </tr> 
                            <tr style='cursor:pointer' class='desmarcado'>
                    <td><input id="intereses" name="intereses" type="radio" value="5" /></td>
                    <td>Persona 5</td>
            </tr> 
       </tbody>
    </table>

answered by 26.02.2016 в 23:17

Load new page and script afterwards Visual C # - Open form already created, Windows Forms

score 4 · Accepted Answer

Note: I added the age column to see the visibility of the functionality of the snippet.

Your solution would look like the following:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
              .val();
  
  alert('El nuevo valor seleccionado es: '+ val);
});

.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
      <td>40</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
      <td>31</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
      <td>23</td>
    </tr>
  </tbody>
</table>