Question

我试图通过HTML传递对象，但得到了

未捕获到的SyntaxError：输入意外结束

错误。我仍在学习JavaScript DOM，不胜感激。

data = getdata(); //retreive my data
var mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
    var ins = createEle("tr");
    ins.innerHTML = "<td>" + data[i]['name'] + "</td>";
    ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=make_modifytourney2(this.id," + data[i] + ")>Modify</button></td></tr>";
    mtable.appendChild(ins);
}

然后我将mtable附加到文档中。 data[i]是一个数组对象，我想通过此代码传递它，但是它不起作用。我知道我可以使用tid再次检索此数据，但由于数据已经存在，我宁愿不这样做。

编辑：我的createEle

function createEle(ele, css) {
var nn = document.createElement(ele);
nn.setAttribute("class", css);
return nn;
}

一个简单的助手编辑2 我的数组数据将是这样

  data=[(4) [{…}, {…}, {…}, {…}]
  0
  :
  {name: "T1", tid: 1, fdate: "2018-07-11", tdate: "2018-07-26", category: "mens", …}
  1
  :
  {name: "T2", tid: 2, fdate: "2018-07-20", tdate: "2018-07-26", category: "womens", …}
  2
  :
  {name: "nart", tid: 3, fdate: "0001-01-01", tdate: "0001-01-01", category: "1", …}
  3
  :
  {name: "xyz", tid: 4, fdate: "0001-01-01", tdate: "0222-02-01", category: "23", …}]

Answer 1

单击生成的“修改”按钮时发生错误。

主要是因为您在onclick属性中用以下命令声明了此指令：

make_modifytourney2(this.id," + data[i] + ")

生成以下HTML代码：

<button id="undefined" onclick="make_modifytourney2(this.id,[object" object])>Modify</button>

现在，您的onclick属性中有一些剪切的JavaScript代码。

我不知道这是否是错字，但是无论如何，如果您想消除该错误，则需要：

使用转义双引号来封装onclick属性指令
使用分隔的单引号将函数调用的参数封装起来

您的代码将为：

ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=\"make_modifytourney2(this.id,'" + data[i] + "')\">Modify</button></td></tr>";

function getdata() { 
  return [{name : "John"}, {name : "Jack"}];
}

function createEle(ele, css) {
  var nn = document.createElement(ele);
  nn.setAttribute("class", css);
  return nn;
}

function make_modifytourney2(param1, param2) {
  console.log(`Clicked Modify with params : ${param1}, ${param2}`);
}

var data = getdata(); //retreive my data
var mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
  var ins = createEle("tr");
  ins.innerHTML = "<td>" + data[i]['name'] + "</td>"
  ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=\"make_modifytourney2(this.id,'" + data[i] + "')\">Modify</button></td></tr>";
  mtable.appendChild(ins);
}
document.body.appendChild(mtable);

现在，由于您生成元素的方式，这有点混乱。宁愿建议您将DOM元素用作JavaScript对象并使用事件侦听器。

是这样的：

function getdata() {
  // dummy object with a tid and a name field 
  return [{
    tid: '1',
    name: "John"
  }, {
    tid: '2',
    name: "Jack"
  }];
}

function createEle(ele, css) {
  var nn = document.createElement(ele);
  nn.setAttribute("class", css);
  return nn;
}

// function that creates a TD element with a child 
function createTd(child) {
  var td = document.createElement("td");
  td.appendChild(child);
  return td;
}

// function that creates a modify button based on your data object 
function createModifyButton(data) {
  var button = document.createElement("button");
  button.id = data.tid;
  button.addEventListener("click", function() {
    // use whatever parameter you need from the data object : 
    make_modifytourney2(data.tid, data.name);
  });
  button.appendChild(document.createTextNode("Modify"));
  return button;
}

function make_modifytourney2(param1, param2) {
  console.log(`Clicked Modify with params : ${param1}, ${param2}`);
}

// local variables 
var data, mtable, i, ins, row1, row2;

data = getdata(); //retreive my data
mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
  ins = createEle("tr");
  // creating tds and appending them : 
  row1 = createTd(document.createTextNode(data[i]['name']));
  ins.appendChild(row1);
  row2 = createTd(createModifyButton(data[i]));
  ins.appendChild(row2);

  mtable.appendChild(ins);
}
document.body.appendChild(mtable);

Answer 2

当您忘记括号或括号时（通常是同时出现两个），通常会出现此错误检查一切是否正确关闭。如果找不到任何内容，请检查在线解析器，仅通过识别即可发现问题：）

希望有帮助！

通过html传递对象变量

2 个答案: