0

Cómo hago para que al hacer clic sobre las filas de una tabla, los valores que ésta contiene en sus columnas marquen los checkboxes correnpondientes como checked.

El mi ejemplo, cuando todas las colunmas tienen info los checkboxes se marcan sin problema, pero cuando en algunos de ellos no hay sólo se marca el primero si es que tiene info, de lo contrario ninguno lo hace.

Este es el html que que contiene los inputs tipo checkbox y la tabla:

var tabla = document.getElementById('lista'),rIndex;
        for (var i = 1; i < tabla.rows.length; i++){
            tabla.rows[i].onclick = function(){
                rIndex = this.rowsIndex;
                for (var i = 0, len = document.getElementsByTagName("input").length; i < len; i++) {
         document.getElementsByTagName("input")[i].checked = false; 
        }
         document.getElementById("h_" + this.cells[4].innerHTML.trim().toLowerCase()).checked = true;
         document.getElementById("h_" + this.cells[5].innerHTML.trim().toLowerCase()).checked = true;
         document.getElementById("h_" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;
         document.getElementById("h_" + this.cells[7].innerHTML.trim().toLowerCase()).checked = true;
            };  
        }
Habilidades:<br>
    <input type="checkbox" name="h1" id="h_html" value="html"> HTML
    <input type="checkbox" name="h2" id="h_js" value="js"> JS
    <input type="checkbox" name="h3" id="h_php" value="php"> PHP
    <input type="checkbox" name="h4" id="h_java" value="java"> JAVA<br>
<input type="reset" value="Reset">
<br>
<table id="lista">
    <thead>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Edad</th>
        <th>Género</th>
        <th> Skill-1 </th>
        <th> Skill-2 </th>
        <th> Skill-2 </th>
        <th> Skill-3 </th>
    </thead>
    <tbody>
        <tr>
            <td>Carlos</td>
            <td>Smith</td>
            <td>28</td>
            <td>m</td>
            <td>html</td>
            <td></td>
            <td>php</td>
            <td></td>
        </tr>
        <tr>
            <td>Ana</td>
            <td>Snow</td>
            <td>23</td>
            <td>f</td>
            <td></td>
            <td>js</td>
            <td></td>
            <td>java</td>
        </tr>
        <tr>
            <td>Tomas</td>
            <td>Lopez</td>
            <td>19</td>
            <td>m</td>
            <td>html</td>
            <td>js</td>
            <td>php</td>
            <td>java</td>
    </tbody>
</table>

Aquí para ver el ejemplo: https://jsfiddle.net/einnerlink/sxvy3hbd/

2 respuestas 2

0

El error que tenías era el siguiente:

Cuando dabas clic a una fila y la fila tenía valores en blanco se estaba buscando un elemento cuyo id tuviera "h_" + '' como no había ningún valor no se le concatenaba nada y a ese elemento que no existía se le estaba indicando que la propiedad checked era true lo cual desencadenaba un error en la consola, así que teniendo esa lógica la solución es primero preguntar si el valor es diferente a vacío para poder seleccionar el elemento correspondiente.

Espero haber sido claro, si tienes dudas con gusto las resuelvo!

var tabla = document.getElementById('lista'), rIndex;

for (var i = 1; i < tabla.rows.length; i++){
    tabla.rows[i].onclick = function(){
        rIndex = this.rowsIndex;

        for (var i = 0, len = document.getElementsByTagName("input").length; i < len; i++) {
            document.getElementsByTagName("input")[i].checked = false; 
        }

        var item_1 = this.cells[4].innerHTML.trim().toLowerCase();
        var item_2 = this.cells[5].innerHTML.trim().toLowerCase();
        var item_3 = this.cells[6].innerHTML.trim().toLowerCase();
        var item_4 = this.cells[7].innerHTML.trim().toLowerCase();

        item_1 != '' ? document.getElementById("h_" + item_1).checked = true : '';
        item_2 != '' ? document.getElementById("h_" + item_2).checked = true : '';
        item_3 != '' ? document.getElementById("h_" + item_3).checked = true : '';
        item_4 != '' ? document.getElementById("h_" + item_4).checked = true : '';
    };  
}
Habilidades:<br>
    <input type="checkbox" name="h1" id="h_html" value="html"> HTML
    <input type="checkbox" name="h2" id="h_js" value="js"> JS
    <input type="checkbox" name="h3" id="h_php" value="php"> PHP
    <input type="checkbox" name="h4" id="h_java" value="java"> JAVA<br>
<input type="reset" value="Reset">
<br>
<table id="lista">
    <thead>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Edad</th>
        <th>Género</th>
        <th> Skill-1 </th>
        <th> Skill-2 </th>
        <th> Skill-2 </th>
        <th> Skill-3 </th>
    </thead>
    <tbody>
        <tr>
            <td>Carlos</td>
            <td>Smith</td>
            <td>28</td>
            <td>m</td>
            <td>html</td>
            <td></td>
            <td>php</td>
            <td></td>
        </tr>
        <tr>
            <td>Ana</td>
            <td>Snow</td>
            <td>23</td>
            <td>f</td>
            <td></td>
            <td>js</td>
            <td></td>
            <td>java</td>
        </tr>
        <tr>
            <td>Tomas</td>
            <td>Lopez</td>
            <td>19</td>
            <td>m</td>
            <td>html</td>
            <td>js</td>
            <td>php</td>
            <td>java</td>
    </tbody>
</table>

6
  • ¿Porqué si en campo que tienen que ver con el género no tiene valor, los checkboxes no se marcan?
    – Einnerlink
    Commented el 22 nov. 2017 a las 0:11
  • @Einnerlink no entiendo a que te refieres, acabe de hacer la prueba quitándoles a todos el género y funciona correctamente Commented el 22 nov. 2017 a las 1:09
  • Fui mas allá con mi ejemplo conectándolo a una db MySQL, pero quí hay una muestra sencilla: jsfiddle.net/einnerlink/u8znf59e Si le quito a alguno el valor del género no sé porqué no marque los checkboxes.
    – Einnerlink
    Commented el 22 nov. 2017 a las 2:12
  • Es por lo mismo que te expliqué en mi respuesta amigo, cuando género está vacío y haces esto document.getElementById("g_" + this.cells[3].innerHTML.trim().toLowerCase()).checked = true; el sistema va a estallar por que estás capturando el atributo checked de un elemento que no existe, así que la solución es hacer lo mismo primero preguntar si género es diferente a vacío. Commented el 22 nov. 2017 a las 2:16
  • Excelente! Eso está perfecto!!!
    – Einnerlink
    Commented el 22 nov. 2017 a las 2:19
0

Como menciona Camilo el error era sobre los id.

Igual te dejo una forma en la que puedas agregar n checkboxes de skills y n celdas de skills.

var tabla = document.getElementById('lista');
var rIndex;

// Seleccionamos todos los checkboxes que tengan un id
// que comience con 'h'. Lo convertimos a array.
var skillsCheckboxes = Array.from(document.querySelectorAll("input[type='checkbox'][id^='h']"));

// Botón reset
document.getElementById('reset').onclick = function(e) {
	skillsCheckboxes.map(function(e) {
  	e.checked = false;
  });
};

for (var i = 1; i < tabla.rows.length; i++) {
  tabla.rows[i].onclick = function() {
    // Guardamos los skills en un array.
    var skills = Array.from(this.cells).slice(4, this.cells.length).map(function(e) {
        return e.innerHTML.trim().toLowerCase();
      })
      // Filtramos. Eliminamos del array las celdas vacias.
      .filter(function(e) {
        return e || false;
      });
    // Marcamos como checked los que se encuentren en los skills de la persona.
    skillsCheckboxes.map(function(e) {
      e.checked = skills.indexOf(e.value) > -1;
    });
  };
}
Habilidades:
<br>
<input type="checkbox" name="h1" id="h_html" value="html"> HTML
<input type="checkbox" name="h2" id="h_js" value="js"> JS
<input type="checkbox" name="h3" id="h_php" value="php"> PHP
<input type="checkbox" name="h4" id="h_java" value="java"> JAVA
<br>
<input type="reset" id="reset" value="Reset">
<br>
<table id="lista">
  <thead>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
    <th>Género</th>
    <th> Skill-1 </th>
    <th> Skill-2 </th>
    <th> Skill-2 </th>
    <th> Skill-3 </th>
  </thead>
  <tbody>
    <tr>
      <td>Carlos</td>
      <td>Smith</td>
      <td>28</td>
      <td>m</td>
      <td>html</td>
      <td></td>
      <td>php</td>
      <td></td>
    </tr>
    <tr>
      <td>Ana</td>
      <td>Snow</td>
      <td>23</td>
      <td>f</td>
      <td></td>
      <td>js</td>
      <td></td>
      <td>java</td>
    </tr>
    <tr>
      <td>Tomas</td>
      <td>Lopez</td>
      <td>19</td>
      <td>m</td>
      <td>html</td>
      <td>js</td>
      <td>php</td>
      <td>java</td>
  </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.