Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title> 
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Nombre</td>
                <td>Apellido</td>
                <td>Opción</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Julieta</td>
                <td>Sánchez</td>
                <td>
                    <input type = "checkbox" />
                </td>
            </tr>
            <tr>
                <td>María</td>
                <td>Suárez</td>
                <td>
                    <input type = "checkbox" />
                </td>
            </tr>
            <tr>
                <td>Estela</td>
                <td>Mondragón</td>
                <td>
                    <input type = "checkbox" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 
table, table *{
    border: .1rem gray solid;
    text-align: center;
}
​
.resaltar{
    background: lightgreen;
}
 
$("tr *").on("click", function(event){
    var fila = $(this).parents("tr");
    
    event.stopImmediatePropagation();
    
    if (fila.hasClass("resaltar")){
        fila.removeClass("resaltar");
    }
    else{
        fila.addClass("resaltar");
    }
    
    if (!$(this).is(":checkbox")){
        if (fila.find(":checkbox").prop("checked")){
            fila.find(":checkbox").prop("checked", false);
        }
        else{
            fila.find(":checkbox").prop("checked", true);
        }   
    }   
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers