JavaScript 中的 HTML“onclick”事件（在表格中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11346436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML "onclick" event in JavaScript (In a table)
提问by William Dao
I'm trying to convert a table I've written in HTML into Javascript because I want the table to be dynamically generated (# of rows). The main issue I'm having is that the individual cells in the table are clickable and open up another html page. Unfortunately, the html "onclick" parameter doesn't work with document.writestatements Here is an examples of a table cell in HTML:
我正在尝试将我用 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>
The functions in this line are predefined and work so I'm not going to post those, but the idea is that the function getTicket(..)is suppose to open up another html page.
这一行中的函数是预定义的并且可以工作，所以我不打算发布这些函数，但想法是函数getTicket(..)假设打开另一个 html 页面。
My issues is how to get the onclick to work in JavaScript. I can create the cells in Javascript using document.write commands but don't really know how to make those cells clickable to run the function getTicket(..).
我的问题是如何让 onclick 在 JavaScript 中工作。我可以使用 document.write 命令在 Javascript 中创建单元格，但不知道如何使这些单元格可点击以运行函数getTicket(..)。
回答by MaxArt
Your style of Javascript programming is ancient, to say the least. document.writeis a function developed mainly when there were almost no common methods to generate dynamic content.
至少可以说，您的 Javascript 编程风格是古老的。document.write是主要在几乎没有生成动态内容的通用方法时开发的功能。
So, you should generate your elements dynamically with methods like document.createElement, append your content there, then attach the elements to the DOM with modern methods like appendChild.
因此，您应该使用诸如 之类的方法动态生成元素document.createElement，将内容附加到那里，然后使用诸如 之类的现代方法将元素附加到 DOM appendChild。
Then, you can attach event listeners using something more modern than the traditional way like onclick, like addEventListener. Here's a snippet:
然后，您可以使用比传统方式更现代的方法来附加事件侦听器onclick，例如addEventListener. 这是一个片段：
var td = document.createElement("td");
td.innerHTML = getDate(1, "plan", "r1c1");
td.addEventListener("click", function() {
getTicket(1, 'plan', 1);
});
row.appendChild(td);
I supposed that rowis the row of the table that you're generating.
我想那row是你正在生成的表的行。
Unfortunately, IE<9 uses a different method called attachEvent, so it'd become:
不幸的是，IE<9 使用了一种不同的方法，叫做attachEvent，所以它会变成：
td.attachEvent("onclick", function() { ...
回答by Vincenzo Maggio
You can modify attributes in HTML using function setAttribute(Attribute, Value).
您可以使用函数setAttribute(Attribute, Value)修改 HTML 中的属性。
With this function you can generate the cell code and define dinamically the attribute.
使用此功能，您可以生成单元格代码并动态定义属性。
回答by jbabey
You should not use document.writeto add elements to your page, there are javascript functions for this:
您不应该使用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);
See it in action: http://jsfiddle.net/teH7X/1/
看到它在行动：http: //jsfiddle.net/teH7X/1/
回答by Durgaprasad Budhwani
Can you please try below code, if that is working then let me know I will give you some better option:-
你能试试下面的代码吗，如果那行得通，那么让我知道我会给你一些更好的选择：-
<script>
document.onload = function()
{
document.getElementById('r1c1').onclick = function()
{
getTicket(1,'plan',1);
}
}
</script>
Please check and let me know.
请检查并让我知道。
