2

我正在尝试编写一个 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表格代码的字符串。

4

5 回答 5

5

像这样的东西：

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;
于 2012-05-16T05:47:22.910 回答
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>

于 2012-05-16T06:16:57.510 回答
0 
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

于 2012-05-16T05:50:27.677 回答
0 
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);
于 2012-05-16T05:56:18.677 回答
0

这是一个 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);
}
于 2012-05-16T06:15:22.820 回答