checkbox in dynamic matrix field

Question

I found a code in one of the questions of the forum, follows:

    function criarTabela(conteudo) {
  var tabela = document.createElement("table");
  var thead = document.createElement("thead");
  var tbody=document.createElement("tbody");
  var thd=function(i){return (i==0)?"th":"td";};
  for (var i=0;i<conteudo.length;i++) {
    var tr = document.createElement("tr");
    for(var o=0;o<conteudo[i].length;o++){
      var t = document.createElement(thd(i));
      var texto=document.createTextNode(conteudo[i][o]);
      t.appendChild(texto);
      tr.appendChild(t);
    }
    (i==0)?thead.appendChild(tr):tbody.appendChild(tr);
  }
  tabela.appendChild(thead);
  tabela.appendChild(tbody);
  return tabela;
}
document.getElementById("tabela").appendChild(criarTabela([
  ["id", "nome",     "idade"],
  [1,    "matheus",  16],
  [2,    "cristian", 16],
  [3,    "pedro",    10],
  [4,    "henrique", 10]
]));

He’s from the member Matheus Cristian and I have a question about it. Would it be possible for one of the columns of the matrix to contain checkboxs? For example:

<input data-index="0" type="checkbox" name="name" value="John" >

I await and thank you.

Answer 1

The lines that create the cell are

var texto=document.createTextNode(conteudo[i][o]);
t.appendChild(texto);

Note that the variable texto is assigned with the result of a call to the function createTextNode, which creates a text node with the given string as parameter. If you provide a tag to this function, it will escape the special characters to print the value as text.

As you want a checkbox, you need to create an HTML node instead of a text node. It is possible to define an HTML directly through the attribute Element.innerHTML.

In the example you posted, the effect is easily obtained by replacing the section I highlighted with this:

t.innerHTML = conteudo[i][o];

And then all values will be considered as HTML, then you can do:

document.getElementById("tabela").appendChild(criarTabela([
  ["id", "nome",     "idade", "habilitado"],
  [1,    "matheus",  16, '<input type="checkbox">']
]));

Note that as we are using the same function to insert HTML and data, depending on the origin of the data there may be risk of an attack XSS. Or even if the source is secure, if the entry has special HTML characters, there may be unwanted effects. If this is a concern, the ideal would be to use a custom code to generate your table.

Answer 2

Dude, I have a solution that might help you.

    String.prototype.template = function (obj) {
        return this.replace(/\{\{([\w]+)\}\}/g, function (str, prop) {
            return obj[prop];
        });
    };

    var varString = '<input data-index="0" type="checkbox" name="name" value="{{id}}"> {{nome}}';

    var users = [
        {
            id      : 1,
            nome    : "matheus",
            idade   : 16
        },{
            id      : 2,
            nome    : "cristian",
            idade   : 16
        },{
            id      : 3,
            nome    : "pedro",
            idade   : 10
        },{
            id      : 4,
            nome    : "henrique",
            idade   : 10
        }
    ];

    var result = "";

    users.forEach(function(obj, index){
        result += varString.template(obj);
    }); 

    document.write(result);