javascript - 使用重置按钮重置表格上的数据

Question

通过做（初学者）学习javascript，这里我有一个表格，其中“动物”和“人”想知道在从选择框中选择数据后，有没有办法将表格数据重置回“动物”？我认为通过在 onclick 中再次调用整个事情可以解决问题，但是......

我的代码：

function myFunction() {
paivitys()
}

function paivitys(data, arvvoja) {
  console.log(data);
  //----
  if (data.hasOwnProperty("animal")) {
    document.getElementById("1name").innerHTML = data.animal;
  } else {
    document.getElementById("1name").innerHTML = data.person;
    document.getElementById("1name1").innerHTML = 'person';
  }
  //----		
  if (data.hasOwnProperty("animal2")) {
    document.getElementById("2name").innerHTML = data.animal2;
  } else {
    document.getElementById("2name").innerHTML = data.person2;
    document.getElementById("2name1").innerHTML = 'person';
  }

  //-----	
  document.getElementById("id").innerHTML = data.id;
}

function paivitaselekt(data, arvvoja) {
  for (var i = 0; i < data.length; i++) {
    var select = document.getElementById("Select");
    var option = document.createElement("option");
    arvvoja.forEach((value) => {
      option.textContent += data[i][value] + " ";
    });
    select.appendChild(option);
  }
}

data = {
  "animal": "tiger",
  "animal2": "lion",
  "id": "54321",
  "dole": {
    "Key": "fhd699f"
  }
}

paivitys(data);
let kokoarray;

data = [{
    "person": "kaka",
    "person2": "julle",
    "id": "9874",
  },
  {
    "person": "Ronaldo",
    "person2": "jussi",
    "id": "65555",
  }
]
kokoarray = data;
paivitaselekt(data, ["person", "id"]);

document.getElementById("Select").addEventListener("change", function(event) {
  const valittutunnsite = event.target.value.split(" ")[1];
  const valittutieto = kokoarray.filter((data) => data.id === valittutunnsite)[0];
  paivitys(valittutieto);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

<div class="container">
  <table class="table ">
    <thead>
      <tr>
        <th style="width: 25%;" id="1name1" class="table-primary">Animal</th>
        <th style="width: 25%;" id="2name1" class="table-primary">Animal</th>
        <th style="width: 25%;" class="table-primary">id</th>
      </tr>
    </thead>
    <tbody>
      <th id="1name"></th>
      <th id="2name"></th>
      <th id="id"></th>
    </tbody>
  </table>

  <select id="Select" name="name"></select>
  <button onclick="myFunction()">Reset</button>
</div>

标签： javascripthtmlarraysjsonfor-loop

Answer 1

您的重置按钮调用该函数：

function myFunction() { paivitys() }

它调用paivitys没有参数的函数。

function paivitys(data, arvvoja) {

该函数将data其作为第一个参数，但您没有将任何变量传递给它。

这条线失败了：

if (data.hasOwnProperty("animal")) {

因为data是未定义的。

但除此之外，您还使用动物定义数据，然后更改数据以包含人。所以动物数据丢失了。您需要使用不同的变量来存储人员数据。