0

Tengo una tabla HTML con varias filas, cada fila tiene un radiobutton, intento hacer que cada fila sea como un link es decir que cambie de color cuando este seleccionada y se seleccione su radiobutton para obtener el id asociado al radiobutton, solo he podido hacer que cada fila de la tabla sea como link ¿Como podría hacerlo?

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

y mi tabla es esta

        <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>

1
  • estaba un pic ocupat, veo que Chofoteddy me gano la respuesta =P, de cualquier forma te dejo otra opción, saludos!
    – Jorgesys
    Commented el 26 feb. 2016 a las 22:45

2 respuestas 2

4

Nota: Añadí la columna edad para ver tener visibilidad sobre la funcionalidad del snippet.

Tu solución quedaría como la siguiente:

/**
 * 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>

1
  • Agradecido man todo perfecto =)
    – Drago25
    Commented el 26 feb. 2016 a las 22:16
2

Esta sería una solución:

$("#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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.