Skip to main content
Añadido boton reset
Origen Enlace
Gerardo
  • 729
  • 5
  • 10
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>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>
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']"));

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" 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>
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>
Origen Enlace
Gerardo
  • 729
  • 5
  • 10

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']"));

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