javascript - 将复选框添加到表中

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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4b4afa7a8a086a3a2a1a3e8a5a9ab" rel="noreferrer noopener nofollow">[email protected]</a></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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c8c979f9098be9b9a999bd09d9193" rel="noreferrer noopener nofollow">[email protected]</a></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);
  }
}

在另一列中创建复选框元素。将行 ID 指定为名称，以便可以将值传递给其他脚本。