javascript - 通过html传递对象变量

Question

我试图通过 HTML 传递一个对象，但得到的是

Uncaught SyntaxError: Unexpected end of input

错误。我仍在学习 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);