Добавить флажки в таблицу

Question

Я пытаюсь создать динамические таблицы и заполнить данные, используя приведенный ниже код, и он работает нормально, но мне нужно добавить флажок для каждой строки таблицы, я пробовал несколько разных способов, но это не работает.

Код

//create dt by reading xml string
var xmlString = '<DataTables xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://C:/FRM/xsd/DataTables.xsd" ><Table name="dt_EdgeCaseHome"><Header><Column name="Username" type="String" /><Column name="Email" type="String" /><Column name="Password" type="String" /></Header><Row><Value>brian</Value><Value>brianf@edge.com</Value><Value>qwerty</Value></Row></Table><Table name="dt_EdgeCaseSpectrum"><Header><Column name="AppHeader" type="String" /><Column name="UserID" type="String" /><Column name="Service" type="String" /><Column name="Clients" type="String" /></Header><Row><Value>Contract</Value><Value>47</Value><Value>Agent</Value><Value>Exodus</Value></Row><Row><Value>Contract</Value><Value>49</Value><Value>Agent</Value><Value>Prometheus</Value></Row></Table></DataTables>',
xml,

// Create table element
table = document.createElement('table');
table.style.width = '100%';
table.setAttribute('border', '1');
tbdy = document.createElement('tbody');
tr = tbdy.insertRow();
tr.id='header';
// Parse the xml
if (window.DOMParser){ // Standard browsers
    var parser = new DOMParser();
    xml = parser.parseFromString(xmlString, "text/xml");
}
else { // Internet Explorer
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.loadXML(xmlString); 
}

var tables = xml.getElementsByTagName("Table");

// for each table
for(var t=0; t<tables.length; t++){
    tableName = tables[t].getAttribute("name");
  console.log(tableName);
  var dtName="dt_EdgeCaseSpectrum";
  if(dtName.match(tableName)){
  // for each table header
    var headers = tables[t].getElementsByTagName("Header");
    var cols = headers[0].childNodes;
    for(var c=0;c<cols.length;c++){
    columnName = cols[c].getAttribute("name");
    td = tr.insertCell();
    td.id=c;
    td.setAttribute('name',columnName);
    td.textContent = columnName;
    console.log(columnName);
    }

    // for each table row
    var rows = tables[t].getElementsByTagName("Row");
    for(var r=0;r<rows.length;r++){
        console.log("row "+r);
      tr = tbdy.insertRow();
      tr.id='iteration_'+r;
        var vals = rows[r].childNodes;
        for(var x=0;x<vals.length;x++){
        value = vals[x].textContent;
      console.log(value);
      td = tr.insertCell();
      td.id=x;
      td.setAttribute('value', value)
      td.textContent = value;
      }
    }
    tbdy.appendChild(tr);
    table.appendChild(tbdy);
    // Append table to the body
    document.body.appendChild(table);
  }
}

Вот демоверсия

JS Fiddle Demo

Может кто-нибудь помочь мне разобраться с этим?Как я могу изменить приведенный ниже код для достижения этой цели?

Answer 1

Примерно так:

//create dt by reading xml string
var xmlString = '<DataTables xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://C:/FRM/xsd/DataTables.xsd" ><Table name="dt_EdgeCaseHome"><Header><Column name="Username" type="String" /><Column name="Email" type="String" /><Column name="Password" type="String" /></Header><Row><Value>brian</Value><Value>brianf@edge.com</Value><Value>qwerty</Value></Row></Table><Table name="dt_EdgeCaseSpectrum"><Header><Column name="AppHeader" type="String" /><Column name="UserID" type="String" /><Column name="Service" type="String" /><Column name="Clients" type="String" /></Header><Row><Value>Contract</Value><Value>47</Value><Value>Agent</Value><Value>Exodus</Value></Row><Row><Value>Contract</Value><Value>49</Value><Value>Agent</Value><Value>Prometheus</Value></Row></Table></DataTables>',
xml,

// Create table element
table = document.createElement('table');
table.style.width = '100%';
table.setAttribute('border', '1');
tbdy = document.createElement('tbody');
tr = tbdy.insertRow();
tr.id='header';
// Parse the xml
if (window.DOMParser){ // Standard browsers
    var parser = new DOMParser();
    xml = parser.parseFromString(xmlString, "text/xml");
}
else { // Internet Explorer
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.loadXML(xmlString); 
}

var tables = xml.getElementsByTagName("Table");

// for each table
for(var t=0; t<tables.length; t++){
    tableName = tables[t].getAttribute("name");
  console.log(tableName);
  var dtName="dt_EdgeCaseSpectrum";
  if(dtName.match(tableName)){
  // for each table header
    var headers = tables[t].getElementsByTagName("Header");
    var cols = headers[0].childNodes;
    for(var c=0;c<cols.length;c++){
    columnName = cols[c].getAttribute("name");
    td = tr.insertCell();
    td.id=c;
    td.setAttribute('name',columnName);
    td.textContent = columnName;
    console.log(columnName);
    }
    var th = tr.insertCell();
    th.id = 'selection';
    th.textContent = 'Select';

    // for each table row
    var rows = tables[t].getElementsByTagName("Row");
    for(var r=0;r<rows.length;r++){
        console.log("row "+r);
      tr = tbdy.insertRow();
      tr.id='iteration_'+r;
        var vals = rows[r].childNodes;
        for(var x=0;x<vals.length;x++){
        value = vals[x].textContent;
        console.log(value);
        td = tr.insertCell();
        td.id=x;
        td.setAttribute('value', value)
        td.textContent = value;
      }
      var select = tr.insertCell();
      var checkbox =  document.createElement("input");
      checkbox.setAttribute('type', 'checkbox');
      checkbox.setAttribute('name', tr.id);
      select.appendChild(checkbox);
    }
    tbdy.appendChild(tr);
    table.appendChild(tbdy);
    // Append table to the body
    document.body.appendChild(table);
  }
}

Создайте элементы-флажки в другом столбце.Назначьте идентификатор строки в качестве имени, чтобы значение могло быть передано другим сценариям.

Answer 2

Просто добавьте cb по этому коду:

  td = tr.insertCell();
  var newCheckBox = document.createElement('input');
  newCheckBox .type = 'checkbox';
  newCheckBox .setAttribute('id', 'cb_test' + r);
  td.appendChild(newCheckBox );

Answer 3

Этот код немного трудно читать.Надеюсь, я понимаю, чего вы хотите достичь.

Вам необходимо добавить дополнительный элемент в массив.Можно сделать с помощью:

vals = [{'textContent': 'generic checkbox item?'}, ...vals];

Сразу после строки: var vals = rows[r].childNodes;

Необязательно: Могу ли я предложить использовать рекурсивную функцию для построения доменаэлементы?Несколько циклов for - это не то, что я бы предложил.Особенно, если количество итераций превышает 2 строки.