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 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");
  }
}

Answer 2

对象是按整数顺序创建的-如果您不想要那样，则需要使密钥不是一个像我现在这样的数字

您可以使用deleteRow()方法

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

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

func isPasswordHasEightCharacter(password: String) -> Bool {
    let passWordRegEx = "^.{8,}$"
    let passwordTest = NSPredicate(format: "SELF MATCHES %@", passWordRegEx)
    return passwordTest.evaluate(with: password)
}

func isPasswordHasNumberAndCharacter(password: String) -> Bool {
    let passRegEx = "^(?=.*[a-z])(?=.*[0-9])"
    let passwordTest = NSPredicate(format: "SELF MATCHES %@", passRegEx)
    return passwordTest.evaluate(with: password)
}

func isPasswordHasNumberAndCharacterSign(password: String) -> Bool {
    let passWordRegEx = "^(?!.[^a-zA-Z0-9@#${'$'}^+=])"
    let passwordTest = NSPredicate(format: "SELF MATCHES %@", passWordRegEx)
    return passwordTest.evaluate(with: password)
}

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");
    }
  }
})

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

2 个答案: