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 demo ::

尝试以下代码

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');

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);
}

它可以在加载事件之后调用，或者只是放在文档中适当的位置：

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

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

5 个答案: