在标签中显示javascript对象

时间：2018-06-20 13:26:11

标签： javascript html css

下面有这段代码，它是一个HTML页，其中包含一个标签，我想使用我的JavaScript多维数组并获取每个first name和age来分别填充<h3>任何实现此建议的简单方法将不胜感激！

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

var personArr = [];
var person = {firstName:"John", lastName:"Doe", age:21};
var person2 = {firstName:"Paul", lastName:"Logan", age:22};
var person3 = {firstName:"Sean", lastName:"Kim", age:32};
var person4 = {firstName:"Ken", lastName:"Chow", age:12};

personArr.push(person, person2, person3, person4);
console.log(personArr);
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1">
<h3>Name 1 :</h3>   
<h3>Age 1 :</h3>

<h3>Name 2 :</h3>   
<h3>Age 2 :</h3>

<h3>Name 3 :</h3>   
<h3>Age 3 :</h3>

<h3>Name 4 :</h3>   
<h3>Age 4 :</h3>
 </div>
 </div>



</body>
</html>

4 个答案:

答案 0 :(得分：2)

无需移动HTML，但您可以使用一些类和/或ID使JS更具可读性。

首先，您需要获取所有的h3。这可以通过将父div定位为类 var txt = '&nbsp; &nbsp; hallo &nbsp; &nbsp; &nbsp;'; var reg = new RegExp("&nbsp;", "g"); // By RegExp constructor creating regular expression object for matching text with a pattern. and "g" is used from global i.e. apply on every match. var result = txt.replace(reg, " "); console.log(result.trim()); //2nd Method var txt = '&nbsp; &nbsp; hallo &nbsp; &nbsp; &nbsp;'; var reg = new RegExp("[&nbsp; |' ']", "g"); var result = txt.replace(reg, ""); console.log(result); 并获取所有子项来实现。

line1

然后，您可以循环该数组和对象数组以填充所有innerHTML。在这里小心，您要添加到innerHTML而不更改它。

可以通过多种方式实现这种成就，我通过循环每两个var parent = document.getElementsByClassName('line1')[0].children; 标签并保留要添加的人的标志来作为一个简单的选择

h3

希望这会有所帮助：> 

   var personFlag = 0;
    for(var i = 0; i < parent.length; i=i+2){
      parent[i].innerHTML += personArr[personFlag].firstName +' '+personArr[personFlag].lastName;
      parent[i+1].innerHTML += personArr[personFlag].age;
      personFlag++
    }

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

var personArr = [];
var person = {firstName:"John", lastName:"Doe", age:21};
var person2 = {firstName:"Paul", lastName:"Logan", age:22};
var person3 = {firstName:"Sean", lastName:"Kim", age:32};
var person4 = {firstName:"Ken", lastName:"Chow", age:12};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0].children;
console.log(parent);
var personFlag = 0;
for(var i = 0; i < parent.length; i=i+2){
  parent[i].innerHTML += personArr[personFlag].firstName +' '+personArr[personFlag].lastName;
  parent[i+1].innerHTML += personArr[personFlag].age;
  personFlag++
}
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}

答案 1 :(得分：1)

您还可以动态创建<h3>标签，并将其附加到line1 div中。然后，就像Gerardo的答案一样，您可以使用循环遍历每个数组项并为其分配一个<h3>。

var personArr = [],
    person    = {firstName:"John", lastName:"Doe", age:21},
    person2   = {firstName:"Paul", lastName:"Logan", age:22},
    person3   = {firstName:"Sean", lastName:"Kim", age:32},
    person4   = {firstName:"Ken", lastName:"Chow", age:12},
    hold      = document.getElementsByClassName('line1')[0],
    output    = '';
    
personArr.push(person, person2, person3, person4);

for (var i = 0; i < personArr.length; i++) {
  output += '<h3>Name ' + (i + 1) + ': ' + personArr[i].firstName + '</h3>';
  output += '<h3>Age ' + (i + 1) + ': ' + personArr[i].age + '</h3>';
}

hold.innerHTML = output;
<div class='line1'></div>

答案 2 :(得分：0)

您总是可以从数组中创建一个字符串，然后更改容器元素（“ .line1”）的innerHTML属性。看起来像这样：

var innerHtmlString = personArr.map(function(person){ return "<h3>" + person.name + "</h3> <h3>" + person.age + "</h3>" }).join("\n") document.querySelector(".line1").innerHTML = innerHtmlString

答案 3 :(得分：0)

您可以在javascript之后添加它：

var tagList = document.getElementsByTagName("h3");

var j=0;
for(var i=0;i<tagList.length;i++){

  tagList[i].innerHTML=personArr[j].lastName+" "+personArr[j].firstName;
  i++;
  tagList[i].innerHTML=personArr[j].age;
j++
}
相关问题
最新问题