2

テキストを書き込んで(最終的に)次のhtmlテーブルを作成するJavascript関数を作成しようとしています(何百ものテーブルを作成するために、異なる長さの引数をそれに渡します):

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

これが 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);
}
于 2012-05-16T06:15:22.820 に答える