checkbox in dynamic array field

Question

checkbox in dynamic array field

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

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

    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 is from the member Matheus Cristian and I have a question about him. Would it be possible for one of the array columns to contain checkboxes? For example:

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

I await and thank you.

javascript html polymer

asked by anonymous 31.03.2016 / 00:06

2 answers

How to get a certain variable json .load () without replacing, just add

score 1 · Answer 1

The lines that create the cell are

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

Note that the texto variable is assigned with the result of a call to the createTextNode function, which creates a text node with the string supplied as a 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. You can define HTML directly through the Element.innerHTML attribute.

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

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

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

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

Note that since we are using the same function to insert HTML and data, depending on the source of the data there may be a risk of an attack XSS . Or, 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 custom code to generate your table.

score 1 · Answer 2

Dude, I have a solution that can 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);