用新数据重新填充选项卡

时间：2018-06-25 03:13:28

标签： javascript html

我下面的代码包含一个用多维数组填充的HTML Tab，我创建了一个Update Data!按钮，试图用{{1}中的新数据重新填充Tab }}函数的问题是，每当我单击updateTab时，它只会将新数据附加到我的原始数据下方。我想问问是否有人对如何button repopulate有什么建议，而不是将其附加在底部。任何帮助将不胜感激。

Tabs Data
function updateTab() {
  var anotherArr = [];
  var person5 = {
    ["first-Name"]: "Jun",
    ["last-Name"]: "Kim",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person6 = {
    ["first-Name"]: "Scooby",
    ["last-Name"]: "Doo",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person7 = {
    ["first-Name"]: "Seiya",
    ["last-Name"]: "Shun",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person8 = {
    ["first-Name"]: "Ikki",
    ["last-Name"]: "Hyuga",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  anotherArr.push(person5, person6, person7, person8);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  anotherArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');
    name.className = "lol";
    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  parent.appendChild(frag);
}


var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var desc = document.createElement('p');
  var button = document.createElement('div');

  name.textContent = `${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = ` ${person['person-desc']}`;
  frag.appendChild(name);
  frag.appendChild(desc);

});
parent.appendChild(frag);


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";
}
document.getElementById("defaultOpen").click();
body {
  font-family: Arial;
}

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

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

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

.lol {
  color: lime;
  font-weight: bold;
}

1 个答案:

答案 0 :(得分：1)

为什么在附加新片段之前不只是清空内容？在parent.appendChild(frag)之前，只需添加parent.innerHTML = ""。

这可以在下面看到：

function updateTab() {
  var anotherArr = [];
  var person5 = {
    ["first-Name"]: "Jun",
    ["last-Name"]: "Kim",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person6 = {
    ["first-Name"]: "Scooby",
    ["last-Name"]: "Doo",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person7 = {
    ["first-Name"]: "Seiya",
    ["last-Name"]: "Shun",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person8 = {
    ["first-Name"]: "Ikki",
    ["last-Name"]: "Hyuga",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  anotherArr.push(person5, person6, person7, person8);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  anotherArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');
    name.className = "lol";
    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  parent.innerHTML = "";
  parent.appendChild(frag);
}


var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var desc = document.createElement('p');
  var button = document.createElement('div');

  name.textContent = `${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = ` ${person['person-desc']}`;
  frag.appendChild(name);
  frag.appendChild(desc);

});
parent.appendChild(frag);


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";
}
document.getElementById("defaultOpen").click();
body {
  font-family: Arial;
}

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

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

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

.lol {
  color: lime;
  font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <div class="size">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
    </div>
    <div id="People" class="tabcontent">
      <div class="line1">
      </div>
    </div>
  </div>
  <button type="button" onclick="updateTab()">Update Data!</button>


</body>

</html>

相关问题
最新问题