替换孩子而不是将其附加到表中

Question

我有一个按钮，可以根据从数组中获取的数据将行添加到表中。但是，我只想附加第一行，对于第二、第三等等，它应该替换第一行而不是附加它。我只希望它一次显示一个位置。

我正在努力解决的另一件事：它首先显示对象中的第二个键，而不是仅仅显示数组的结构。这是为什么？

var obj = {
  "15800175": {
    "posID": "159469",
    "scanID": "22597",
    "anr": "15800175",
    "TVanr": "",
    "code": "G-09-27-2E",
    "ean": "4710069680575",
    "marke": "fox",
    "bez": "jersey yellow",
    "bez2": "size xl",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "TT9857BG\r\n",
    "Langtext": ""
  },
  "15100027": {
    "posID": "159471",
    "scanID": "22597",
    "anr": "15100027",
    "TVanr": "",
    "code": "G-11-03-2A",
    "ean": "4712511825411",
    "marke": "fox",
    "bez2": "jersey L",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "blue\r\n",
    "Langtext": ""
  }
}
var counter = 0;
var arr = Object.keys(obj).map(key => obj[key]);
document.getElementById("btnAdd").onclick = function(event) {
  //variables
  let tbody = document.getElementById("tbodyExample");

  //logic
  let element = arr[counter] != undefined ? arr[counter] : undefined;
  if (element !== undefined) {
    var row = document.createElement('tr'); //'<tr id="'+element.posID+'">       </tr>';
    row.setAttribute("id", element.posID);
    row.innerHTML = '<td>' + element.posID + '</td><td>' + element.code + '</td>  <td>' + (element.bez == undefined ? element.bez2 : element.bez) + '</td><td>' + element.anr + '</td><td>' + element.menge + '</td><td>' + element.ve + '</td>';
    tbody.appendChild(row);
    counter++;
  } else {
    alert("No more items found");
  }
}

<button type="button" id="btnAdd">Add</button>
<table>
  <thead></thead>
  <tbody id="tbodyExample"></tbody>
</table>

Answer 1

对象是按整数顺序创建的 - 如果你不希望这样，你需要像我现在所做的那样让键不是数字

你可以使用deleteRow()方法

注意我会测试一个是否存在，如果没有，我不会删除最后一个

我还添加了一个搜索并将禁用按钮的功能重构为它自己的功能

var JSONString = `{ "15800175": { "posID": "159469", "scanID": "22597", "anr": "15800175", "TVanr": "", "code": "G-09-27-2E", "ean": "4710069680575", "marke": "fox", "bez": "jersey yellow", "bez2": "size xl", "menge": "1", "ve": "St\u00fcck", "Dimensionstext": "TT9857BG\\r\\n", "Langtext": "" }, "15100027": { "posID": "159471", "scanID": "22597", "anr": "15100027", "TVanr": "", "code": "G-11-03-2A", "ean": "4712511825411", "marke": "fox", "bez2": "jersey L", "menge": "1", "ve": "St\u00fcck", "Dimensionstext": "blue\\r\\n", "Langtext": "" } }` 

JSONString = JSONString.replace(/"(\d+)":/g, '"_$1":')
var obj = JSON.parse(JSONString);
console.log(Object.keys(obj))

let counter = -1;
const arr = Object.keys(obj).map(key => obj[key]);
const tbody = document.getElementById("tbodyExample");

function showElement(counter,dir) {

  if (dir !=null && (counter === -1 || counter >= arr.length)) {
    counter = dir === 1 ? arr.length - 1 : 0;
  }

  document.getElementById("prev").disabled = counter <= 0;
  document.getElementById("next").disabled = counter === arr.length - 1;

  let element = arr[counter];

  var row = document.createElement('tr'); //'<tr id="'+element.posID+'">       </tr>';
  row.setAttribute("id", element.posID);
  row.innerHTML = '<td>' + element.posID + '</td><td>' + element.code + '</td>  <td>' + (element.bez ? element.bez : element.bez2) + '</td><td>' + element.anr + '</td><td>' + element.menge + '</td><td>' + element.ve + '</td>';

  let firstRow = tbody.querySelector("tr");
  if (firstRow) tbody.deleteRow(0);
  tbody.appendChild(row);
  document.getElementById("barcode").value=element.anr;
}

document.getElementById("navigation").addEventListener("click", function(event) {
  const tgt = event.target;
  if (tgt.className !== "nav") return;
  const dir = tgt.id === "prev" ? -1 : 1;
  counter += dir;
  showElement(counter,dir)
});
document.getElementById("next").click()

document.getElementById("barcode").addEventListener("keypress", function(e) {
  if (event.which == 13 || event.keyCode == 13) {
    var anr = this.value.trim();
    var index = arr.findIndex(x => x.anr === anr);
    if (index != -1) showElement(index)
    else {
      console.log(anr, "not found");
    }
  }
})

<input type="text" id="barcode" placeholder="Barcode" value="" />
<div id="navigation"><button type="button" id="prev" class="nav">Prev</button><button type="button" id="next" class="nav">Next</button></div>
<table>
  <thead></thead>
  <tbody id="tbodyExample"></tbody>
</table>

Answer 2

你可以使用deleteRow()方法

var obj = {
  "15800175": {
    "posID": "159469",
    "scanID": "22597",
    "anr": "15800175",
    "TVanr": "",
    "code": "G-09-27-2E",
    "ean": "4710069680575",
    "marke": "fox",
    "bez": "jersey yellow",
    "bez2": "size xl",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "TT9857BG\r\n",
    "Langtext": ""
  },
  "15100027": {
    "posID": "159471",
    "scanID": "22597",
    "anr": "15100027",
    "TVanr": "",
    "code": "G-11-03-2A",
    "ean": "4712511825411",
    "marke": "fox",
    "bez2": "jersey L",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "blue\r\n",
    "Langtext": ""
  }
}
var counter = 0;
var arr = Object.keys(obj).map(key => obj[key]);
document.getElementById("btnAdd").onclick = function(event) {
  //variables
  let tbody = document.getElementById("tbodyExample");

  //logic

  // clear the first row
  document.getElementById("yourTableId").deleteRow(0);

  let element = arr[counter] != undefined ? arr[counter] : undefined;
  if (element !== undefined) {
    var row = document.createElement('tr'); //'<tr id="'+element.posID+'">       </tr>';
    row.setAttribute("id", element.posID);
    row.innerHTML = '<td>' + element.posID + '</td><td>' + element.code + '</td>  <td>' + (element.bez == undefined ? element.bez2 : element.bez) + '</td><td>' + element.anr + '</td><td>' + element.menge + '</td><td>' + element.ve + '</td>';
    tbody.appendChild(row);
    counter++;
  } else {
    alert("No more items found");
  }
}