Question

我想从数组中创建一个html表。我想使用循环函数来执行此操作。但我很难找到如何将数组循环到html表。我希望第一部分中的国家名称和国家/地区的“国家/地区”。在上一节中，我希望将首都和“资本”放在首位。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>


    <script>

    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]




    </script>
</body>
</html>

Answer 1

我认为你想要这样的东西，这是纯粹的javascript（运行代码片段） -

＆＃13;

var country = ["Norway", "Sweden", "Denmark"];
        var capital = ["Oslo", "Stockholm" , "Copenhagen"]
        var table= document.createElement('table'),
            thead = document.createElement('thead'),
            tbody = document.createElement('tbody'),
            th,
            tr,
            td;
            th = document.createElement('th'),          
            th.innerHTML="County";
            table.appendChild(th);
            th = document.createElement('th'); 
            th.innerHTML= "Capital"
            table.appendChild(th);
            table.appendChild(thead);            
            table.appendChild(tbody);
            
            document.body.appendChild(table);
         for(var i=0;i<country.length;i++){
            tr = document.createElement('tr'),
            //for county
            td= document.createElement('td');
            td.innerHTML=country[i];
            tr.appendChild(td);

            //for capital
            td = document.createElement('td');
            td.innerHTML=capital[i];
            tr.appendChild(td);
            tbody.appendChild(tr);
         }

＆＃13;

table{
   border-collapse: collapse;
}

th,td{
 border:1px solid #000; 
}

＆＃13;

Answer 2

您可以通过循环浏览国家/地区列表并创建HTML字符串来完成此操作。然后你可以使用类或id选择器将它放在tbody内。这是一个例子 -

＆＃13;

var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]

    var bodyString = '';
    $.each(country, function(index, ctry) {
        bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.countriesTable tbody').html(bodyString);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <table class="countriesTable">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody>
      
      </tbody>
  </table>
</body>
</html>

＆＃13;

Answer 3

我为此做了一个简单的工具 - https://github.com/dszakal/ArrayToTable

示例：

var tableGen = new ArrayToTable();
// optional
tableGen.tableclasses = 'bluetable table-with-oddeven'; // for css
tableGen.tableid = 'something-unique';

dataArray = [
{
    country: 'Norway',
    capital: 'Oslo'
}
,
{
    country: 'Sweden',
    capital: 'Stockholm'
}
,
{
    country: 'Denmark',
    capital: 'Copenhagen'
}
];

tableGen.putTableHtmlToId(dataArray, 'tableHere');

Answer 4

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"];

    var bodyString = '';
    $.each(country, function(index, country) {
        bodyString += ('<tr><td>'+country+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.country tbody').html(bodyString);
    
    });
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <table class="table table-striped country">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody></tbody>
  </table>
</body>
</html>

Answer 5

这是一种使用模板文字的好方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Array2Table</title>
</head>
<body>
  <div id="tableContent"></div>
  <script>
    var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]
    const tmpl = (country,capital) => `
        <table><thead>
        <tr><th>Country<th>Capital<tbody>
        ${country.map( (cell, index) => `
            <tr><td>${cell}<td>${capital[index]}</tr>
        `).join('')}
        </table>`;
    tableContent.innerHTML=tmpl(country, capital);
    </script> 
</body>
</html>

用于Internet Explorer：

var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var tmpl = function tmpl(country, capital) {
return "<table><thead><tr><th>Country<th>Capital<tbody>" + 
    country.map(function (cell, index) {
    return "<tr><td>" + cell + "<td>" + 
    capital[index] + "</tr>";
}).join('') + "</table>";
};
tableContent.innerHTML = tmpl(country, capital);

Javascript数组到html表

5 个答案: