从逗号分隔的字符串javascript创建html表

Question

我正在尝试编写一个 Javascript 函数，该函数将文本写入（最终）创建以下 html 表（我将向其传递不同长度的参数以创建数百个表）：

<table>
    <tr><td><u>School</u></td>
    <td><u>Percent</u></td>
    <tr><td>School 1: </td>
    <td>Percent1</td></tr>
    <tr><td>School 2: </td>
    <td>Percent2</td></tr>
    <tr><td>School 3: </td>
    <td>Percent3</td></tr>  
</table>

我拥有的输入是逗号分隔的字符串：

var school_list = "School 1, School 2, School 3"
var pct_list = "Percent1, Percent2, Percent3"

该函数需要传入school_list和pct_list，并返回上述html表格代码的字符串。

Answer 1

像这样的东西：

var schoolArr = school_list.split(',');
var pctArr = pct_list.split(',');
var table = "<table>";
for (var i=0; i< schoolArr.length; i++) {
    table = table + "<tr><td>"+ schoolArr[i]+"</td><td>"+ pctArr[i] +"</td></tr>"; 
}
table = table + "</table>";

return table;

Answer 2

您可以使用Jsfiddle 演示尝试以下代码 ::

 function createTable(tab) { var tar = document.getElementById(tab); var table = document.createElement('TABLE'); table.border = '1'; var tbdy = document.createElement('TBODY'); table.appendChild(tbdy); for (var j = 0; j < 4; j++) { var tr = document.createElement('TR'); tbdy.appendChild(tr); for (var k = 0; k < 2; k++) { var td = document.createElement('TD'); td.width = '100'; if (k == 0) td.innerHTML = "School" + (j + 1); else td.innerHTML = "Percent" + (j + 1); tr.appendChild(td); } } tar.appendChild(table); } createTable('tab');

 <div id="tab"></div>

Answer 3

var numberOfSchools = school_list.split(',');
var numberOfPercent = pct_list.split(',');
var htmlOutput= '<table><tr><td><u>School</u></td><td><u>Percent</u></td>';
for(var i = 0 ; i < numberOfSchools.length; i++)
{
htmlOutput +=  "<tr><td>" + numberOfSchools[i] + "</td>";
htmlOutput += "<td>"+numberOfPercent[i] +"</td></tr>"

}
htmlOutput += "</table>"

并返回 htmlOutput

Answer 4

var schools = school_list.split(/,\s*/g).join('</td><td>');
var pcts = pct_list.split(/,\s*/g).join('</td><td>');
return '<table><tr><td>' + schools + '</td></tr><tr><td>' + pcts + '</td></tr></table>'

或者更好的方法是在DOM中构建整个表并直接将其放置在文档中。

function appendTD(tr, content) {
  var td = document.createElement('td');
  td.appendChild(document.createTextNode(content));
  tr.appendChild(td);
}
var table = document.createElement('table');
school_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));
pct_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));

someParent.appendChild(table);

Answer 5

这是一个 DOM 方法，重点说明了为什么 innerHTML 如此受欢迎。 DOM 方法最近执行起来相当快，但代码量有点令人厌烦，除非有充分的理由使用它。

使用几个辅助函数可以显着减少代码量，因此它与 innerHTML 方法相当：

var school_list = "School 1, School 2, School 3" 
var pct_list = "Percent1, Percent2, Percent3" 

function makeTable(schools, percents) {

  // Turn input strings into arrays
  var s = schools.split(',');
  var p = percents.split(',');

  // Setup DOM elements
  var table = document.createElement('table');
  var tbody = table.appendChild(document.createElement('tbody'));
  var oRow = document.createElement('tr');
  var row;

  oRow.appendChild(document.createElement('td'));
  oRow.appendChild(document.createElement('td'));
  table.appendChild(tbody);

  // Write header
  row = tbody.appendChild(oRow.cloneNode(true));
  row.childNodes[0].appendChild(document.createTextNode('School'));
  row.childNodes[1].appendChild(document.createTextNode('Percent'));

  // Write rest of table
  for (var i=0, iLen=s.length; i<iLen; i++) {
    row = tbody.appendChild(oRow.cloneNode(true));
    row.childNodes[0].appendChild(document.createTextNode(s[i]));
    row.childNodes[1].appendChild(document.createTextNode(p[i]));
  }
  document.body.appendChild(table);
}

它可以在 load 事件之后调用，也可以放在文档中合适的位置：

window.onload = function() {
  makeTable(school_list, pct_list);
}