html表的Javascript数组_Javascript_Html_Arrays_Html Table

html表的Javascript数组

javascript html arrays

html表的Javascript数组,javascript,html,arrays,html-table,Javascript,Html,Arrays,Html Table,我想从数组中创建一个html表。我想使用loop函数来实现这一点。但我很难找到如何将数组循环到html表。我想在第一部分有国家的名称，在国家的顶部有“国家”。在最后一节中，我想把大写字母和“大写”放在上面以下是我的html代码： <!DOCTYPE html> <html> <head> </head> <body> <script> var country = ["Norway", "Sweden"

我想从数组中创建一个html表。我想使用loop函数来实现这一点。但我很难找到如何将数组循环到html表。我想在第一部分有国家的名称，在国家的顶部有“国家”。在最后一节中，我想把大写字母和“大写”放在上面

以下是我的html代码：

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


    <script>

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




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


var国家=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]

您可以通过在国家/地区列表中循环并创建HTML字符串来完成此操作。然后，您可以使用类或id选择器将其放入

tbody

。这里有一个例子-

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
var bodyString=''；
美元/个（国家/地区、职能（指数、中心）{
bodyString+=（''+ctry+''+capital[索引]+''）；
});
$（'.countriesTable tbody'）.html（bodyString）

乡村资本
您可以通过在国家/地区列表中循环并创建HTML字符串来完成此操作。然后，您可以使用类或id选择器将其放入tbody
。这里有一个例子-

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
var bodyString=''；
美元/个（国家/地区、职能（指数、中心）{
bodyString+=（''+ctry+''+capital[索引]+''）；
});
$（'.countriesTable tbody'）.html（bodyString）

乡村资本


$（文档）.ready（函数（）{
var国家=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]；
var bodyString=''；
美元。每个（国家，职能（索引，国家）{
bodyString+=（''+国家+''+资本[指数]+''）；
});
$（'.country tbody'）.html（bodyString）；
});
乡村资本


$（文档）.ready（函数（）{
var国家=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]；
var bodyString=''；
美元。每个（国家，职能（索引，国家）{
bodyString+=（''+国家+''+资本[指数]+''）；
});
$（'.country tbody'）.html（bodyString）；
});
乡村资本
我认为您需要这样的东西，这是纯javascript（运行代码段）--

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
var table=document.createElement（'table'），
thead=document.createElement（'thead'），
tbody=document.createElement（'tbody'），
th，
tr，
运输署；
th=document.createElement（'th'），
th.innerHTML=“县”；
表2.儿童（th）；
th=document.createElement（'th'）；
th.innerHTML=“资本”
表2.儿童（th）；
表1.儿童（thead）；
表3.儿童（t身体）；
document.body.appendChild（表）；
对于（var i=0；i我认为您需要这样的东西，这是纯javascript（运行代码段）--

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
var table=document.createElement（'table'），
thead=document.createElement（'thead'），
tbody=document.createElement（'tbody'），
th，
tr，
运输署；
th=document.createElement（'th'），
th.innerHTML=“县”；
表2.儿童（th）；
th=document.createElement（'th'）；
th.innerHTML=“资本”
表2.儿童（th）；
表1.儿童（thead）；
表3.儿童（t身体）；
document.body.appendChild（表）；
对于（var i=0；i来说，使用模板文本是一种很好的方法
<!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>


可排列
var国家=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
const tmpl=（国家、首都）=>`
乡村资本
${country.map（（单元格，索引）=>`
${cell}${capital[index]}
`).join（“”）}
`;
tableContent.innerHTML=tmpl（国家、首都）；

对于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);

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]；
var tmpl=职能tmpl（国家、资本）{
返回“CountryCapital”+
国家地图（功能（单元格、索引）{
返回“+单元格+”+
资本[指数]+“”；
}).join（“”）+“”；
};
tableContent.innerHTML=tmpl（国家、首都）；
这是使用模板文本的好方法
<!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>


可排列
var国家=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]
const tmpl=（国家、首都）=>`
乡村资本
${country.map（（单元格，索引）=>`
${cell}${capital[index]}
`).join（“”）}
`;
tableContent.innerHTML=tmpl（国家、首都）；

对于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);

var country=[“挪威”、“瑞典”、“丹麦”]；
var资本=[“奥斯陆”、“斯德哥尔摩”、“哥本哈根”]；
var tmpl=职能tmpl（国家、资本）{
返回“CountryCapital”+
国家地图（功能（单元格、索引）{
返回“+单元格+”+
资本[指数]+“”；
}).join（“”）+“”；
};
tableContent.innerHTML=tmpl（国家、首都）；
我为此制作了一个简单的工具-
例如：
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');

我做了一个简单的工具-
例如：
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');

可能的重复可能的重复