JavaScript 中的 HTML“onclick”事件（在表格中）答案

【问题标题】：HTML "onclick" event in JavaScript (In a table)JavaScript 中的 HTML“onclick”事件（在表格中）
【发布时间】：2012-07-05 23:33:51
【问题描述】：

我正在尝试将我用 HTML 编写的表格转换为 Javascript，因为我希望动态生成表格（行数）。我遇到的主要问题是表格中的各个单元格是可点击的并打开另一个 html 页面。不幸的是，html "onclick" 参数不适用于document.write 语句下面是 HTML 中表格单元格的示例：

<td id="r1c1" align="center" onclick="getTicket(1,'plan',1);"><script language="JavaScript">document.write(getDate(1,"plan", "r1c1")); </script></td>

这一行中的函数是预定义的并且可以工作，所以我不打算发布这些函数，但我们的想法是函数 getTicket(..) 应该打开另一个 html 页面。

我的问题是如何让 onclick 在 JavaScript 中工作。我可以使用 document.write 命令在 Javascript 中创建单元格，但我真的不知道如何使这些单元格可点击以运行函数 getTicket(..)。

【问题讨论】：

不要使用document.write。使用 appendChild 或 jQuery 或类似的。
这在哪个浏览器中不起作用？您的线路在 Safari、Chrome 和 Firefox 中运行良好。没有测试 IE ......如前所述，使用 document.write 以外的其他东西是一个好习惯。
如果您想动态生成属性，请阅读我的答案...希望这会有所帮助！

标签： javascript html html-table onclick document.write

【解决方案1】：

你能试试下面的代码吗，如果可行，请告诉我，我会给你一些更好的选择：-

<script>
   document.onload = function()
   {
       document.getElementById('r1c1').onclick = function()
       {
           getTicket(1,'plan',1);
       }
   }
</script>

请检查并告诉我。

【讨论】：

谢谢。我知道这会起作用，但我的一个问题是，因为表是动态分配的，我无法控制元素的 id，因为我不知道会有多少行
你可以再做一件事，保持每个 id 的类名相同，如 'tdClass' 和参数如 "1,'plan',1" 你可以将其作为数据属性，如 data-first ="1", data-second="plan", data-third="1" 并通过在 'tdClass' 类上使用 jquery 甚至可以获取数据，然后您可以单击相应的事件。如果你愿意，我会为你写代码 :) – Pushkar just now e

【解决方案2】：

至少可以说，您的 Javascript 编程风格是古老的。 document.write 是主要在几乎没有通用方法生成动态内容时开发的功能。

因此，您应该使用document.createElement 等方法动态生成元素，将内容附加到那里，然后使用appendChild 等现代方法将元素附加到DOM。

然后，您可以使用比onclick 等传统方式更现代的方式附加事件侦听器，例如addEventListener。这是一个sn-p：

var td = document.createElement("td");
td.innerHTML = getDate(1, "plan", "r1c1");
td.addEventListener("click", function() {
    getTicket(1, 'plan', 1);
});
row.appendChild(td);

我认为row 是您正在生成的表的行。

不幸的是，IEattachEvent，所以它变成了：

td.attachEvent("onclick", function() { ...

【讨论】：

好的，谢谢这对我来说很有效（虽然让函数在 for 循环中工作是另一个问题，但我也设法解决了这个问题。）。看来我还有很多东西要学 JavaScript（虽然我仍然认为自己是初学者）
别担心，Javascript 有一个非常好的学习曲线。你会在一个月内自己发现它:)

【解决方案3】：

你不应该使用document.write向你的页面添加元素，有javascript函数可以做到这一点：

var myCell = document.createElement('td');
myCell.setAttribute('id', 'r1c1');
myCell.setAttribute('align', 'center');
myCell.onclick = function () {
    getTicket(1, 'plan', 1);
};

// myRow is the 'tr' you want this 'td' to be a child of.
myRow.appendChild(myCell);

查看实际操作：http://jsfiddle.net/teH7X/1/

【讨论】：

【解决方案4】：

您可以使用函数 setAttribute(Attribute, Value) 修改 HTML 中的属性。

使用此功能，您可以生成单元格代码并动态定义属性。

【讨论】：