动态添加onClick事件。 [英] Dynamically adding an onClick event.
问题描述
大家好。我确信我的问题的答案很简单，但我似乎无法动态地将onClick事件添加到我的脚本中。
我有一个动态生成的表，我正在努力获得一个onClick事件以显示在HTML源代码中。
任何帮助都将不胜感激。这是我当前代码的块，
不起作用。
var tr1 = document.createElement（''tr''）;
tr1.style.backgroundColor =" blue" ;;
var td1 = document.createElement（''td''）;
var b = document.createElement（''b''）;
var titleSpan = document.createElement（''span''）;
titleSpan.style.color =" white" ;;
table.appendChild（tr1）;
tr1.appendChild（td1）;
td1.appendChild（b ）;
b.appendChild（titleSpan）;
titleSpan.innerHTML = menuTitle;
titleSpan.onClick =" this.toggle（） ;
我假设我遗漏了一些语法错误的东西？
一切顺利。
Daz。
Dazaécrit：
大家好。我确信我的问题的答案很简单，但我似乎无法动态地将onClick事件添加到我的脚本中。
我有一个动态生成的表，我正在努力获得一个onClick事件以显示在HTML源代码中。
任何帮助都将不胜感激。这是我目前的代码块，
不起作用。
var tr1 = document.createElement（''tr''）;
tr1.style.backgroundColor =" blue" ;;
var td1 = document.createElement（''td''）;
var titleSpan = document.createElement（''span''）;
titleSpan.style.color =" white";
titleSpan.style.fontWeight =" bold";
titleSpan.onClick = function（） {this.toggle（）; };
titleSpan.innerHTML = menuTitle;
td1.appendChild（titleSpan）;
tr1.appendChild（td1）;
tbody.appendChild（tr1）;
使用tbody而不是table
..
ASM写道：
Dazaécrit：
大家好。我确信我的问题的答案很简单，但我似乎无法动态地将onClick事件添加到我的脚本中。
我有一个动态生成的表，我正在努力获得一个onClick事件以显示在HTML源代码中。
任何帮助都将不胜感激。这是我目前的代码块，
不起作用。
var tr1 = document.createElement（''tr''）;
tr1.style.backgroundColor =" blue" ;;
var td1 = document.createElement（''td''）;
var titleSpan = document.createElement（''span''）;
titleSpan.style.color =" white";
titleSpan.style.fontWeight =" bold";
titleSpan.onClick = function（） {this.toggle（）; };
titleSpan.innerHTML = menuTitle;
td1.appendChild（titleSpan）;
tr1.appendChild（td1）;
tbody.appendChild（tr1）;
使用tbody而不是table
。
感谢ASM。我的表变量实际上是对tbody的引用。不过，你是对的。我应该把它命名为tbody而不是桌子。
我仍然无法让它工作。由于某种原因，切换功能
根本不工作。我试过直接将函数添加到onClick
事件中，它仍然无法工作......我甚至没有得到
错误/警告在我的JavaScript控制台中...
我知道这是我做错了什么，我只是不知道是什么。
这是我的代码。它看起来很乱，因为我试图找出
的工作原理......
// **********代码开始**********
var table = document.getElementById（''ctg_table''）;
var tableWidth = 80;
函数initPage（）
{
table.parentNode.style.width = tableWidth +"％";
displayInputDialog（）;
var row1 = new menuItem（" test"）;
}
function displayInputDialog（）
{
var tr = document.createElement（''tr''）;
tr.setAttribute（" id"，" rInputDialog"）;
tr.style.height =" 20％";
var td = document.createElement（''td'' ）;
textarea = document.createElement（''textarea''）;
textarea.setAttribute（" name"，" inputDialog"）;
textarea.setAttribute（" id"，" inputDialog"）;
textarea。 style.width =" 100％";
textarea.style.height =" 100％";
textarea.style.borderStyle =" ridge" ;
table.appendChild（tr）;
tr.appendChild（td）;
td.appendChild（textarea）;
}
function menuItem（menuTitle）
{
var tr1 = document.createElement（''tr' '）;
tr1.style.backgroundColor =" blue";
var td1 = document.createElement（''td''）;
var b = document.createElement（''b''）;
var titleSpan = document.createElement（''span''）;
titleSpan.style。 color =" white";
table.appendChild（tr1）;
tr1.appendChild（td1）;
td1.appendChild（b ）;
b.appendChild（titleSpan）;
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement（''tr' '）;
var td2 = document.createElement（''td''）;
table.a ppendChild（tr2）;
tr2.appendChild（td2）;
tr2.style.borderStyle =''ridge'';
tr2。 style.borderColor =" green";
td2.innerHTML =''blah'';
titleSpan.onClick = function（）
{
var textarea = document.getElementById（''inputDialog''）;
textarea.value =" blah"
}
}
initPage（）;
// ************代码结束************
非常感谢您的投入。
如果您能提供更具建设性的建议批评，它会优雅地收到
，因为我宁愿做正确的事情，也不会错误地使用
方式。
Daz。
Dazaécrit：
感谢ASM。我的表变量实际上是对tbody的引用。不过，你是对的。我应该把它命名为tbody而不是桌子。
我仍然无法让它工作。由于某种原因，切换功能
根本不工作。我试过直接将函数添加到onClick
事件中，它仍然无法工作......我甚至没有得到
错误/警告在我的JavaScript控制台中...
我知道这是我做错了什么，我只是不知道是什么。
这是我的代码。它看起来很乱，因为我试图找出
的工作原理......
// **********代码开始**********
var table = document.getElementById（''ctg_table''）;
var tableWidth = 80;
函数initPage（）
{
table.parentNode.style.width = tableWidth +"％";
displayInputDialog（）;
var row1 = new menuItem（" test"）;
}
function displayInputDialog（）
{
var tr = document.createElement（''tr''）;
tr.setAttribute（" id"，" rInputDialog"）;
tr.style.height =" 20％";
var td = document.createElement（''td'' ）;
textarea = document.createElement（''textarea''）;
IE更喜欢：
textarea.name =" inputDialog";
textarea.id =" ; inputDialog" ;;
textarea.setAttribute（" name"，" inputDialog"）;
textarea.setAttribute（" id" ;，inputDialog）;
textarea.style.width =" 100％";
textarea.style.height =" 100％" ;;
textarea.style.borderStyle =" ridge";
table.appendChild（tr）;
tr.appendChild（td）;
td.appendChild（textarea）;
你为什么要在你的td附加一些东西呢？
td.appendChild（textarea）; //来自内部
tr.appendChild（td）; //到外面
table.appendChild（tr）; // box
}
function menuItem（menuTitle）
{
var tr1 = document.createElement（''tr''）;
tr1.style.backgroundColor =" blue";
var td1 = document。 createElement（''td''）;
var b = document.createElement（''b''）;
var titleSpan = document.createElement（''span' '）;
titleSpan.style.color =" white";
table.appendChild（tr1）;
tr1.appendChild（td1 ）;
td1.appendChild（b）;
b.appendChild（titleSpan）;
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement（''tr''）;
var td2 = document.createElement（''td''）;
和我之前说过的一样：最好按正确的顺序追加
p或span -td -tr -tbody -table -body
table.appendChild（tr2）;
tr2.appendChild（td2）;
tr2。 style.borderStyle =''ridge'';
tr2.style.borderColor =" green" ;;
td2.innerHTML =''blah'';
titleSpan.onClick = function（）
或许：
titleSpan.onclick = function（）
< blockquote class =post_quotes>
{
alert（''see''）;
var textarea = document.getElementById（''inputDialog''）;
textarea.value =" blah"
}
}
initPage（）;
// ****** ******代码结束************
非常感谢您的投入。
一个问题：这个表格是一个表格吗？
Hello everyone. I am sure the answer to my question is simple, but I
can''t seem to dynamically add an onClick event to my script.
I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.
Any help would be appreciated. Here is a block of my current code which
doesn''t work.
var tr1 = document.createElement(''tr'');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement(''td'');
var b = document.createElement(''b'');
var titleSpan = document.createElement(''span'');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
titleSpan.onClick = "this.toggle()";
I am assuming that I am missing something with the syntax?
All the best.
Daz.
Daz a écrit :Hello everyone. I am sure the answer to my question is simple, but I
can''t seem to dynamically add an onClick event to my script.
I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.
Any help would be appreciated. Here is a block of my current code which
doesn''t work.var tr1 = document.createElement(''tr'');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement(''td'');
var titleSpan = document.createElement(''span'');
titleSpan.style.color = "white";
titleSpan.style.fontWeight = "bold";
titleSpan.onClick = function() {this.toggle(); };
titleSpan.innerHTML = menuTitle;
td1.appendChild(titleSpan);
tr1.appendChild(td1);
tbody.appendChild(tr1);
use tbody instead of table
..
ASM wrote:
Daz a écrit :Hello everyone. I am sure the answer to my question is simple, but I
can''t seem to dynamically add an onClick event to my script.
I have a table which is generated dynamically, I am just struggling
getting an onClick event to show in the HTML source.
Any help would be appreciated. Here is a block of my current code which
doesn''t work.
var tr1 = document.createElement(''tr'');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement(''td'');
var titleSpan = document.createElement(''span'');
titleSpan.style.color = "white";
titleSpan.style.fontWeight = "bold";
titleSpan.onClick = function() {this.toggle(); };
titleSpan.innerHTML = menuTitle;
td1.appendChild(titleSpan);
tr1.appendChild(td1);
tbody.appendChild(tr1);
use tbody instead of table
.Thanks ASM. my table variable is actually a reference to tbody. You''re
right, though. I should have named it tbody and not table.
I still can''t get it to work. For some reason, the toggle function is
not working at all. I have tried adding the function to the onClick
event directly, and it still doesn''t work... I don''t even get an
error/warning in my JavaScript Console...
I know it''s something I am doing wrong, I just can''t figure out what.
Here is my code. It looks messy because I am trying to figure out how
things work...
//********** CODE START **********
var table = document.getElementById(''ctg_table'');
var tableWidth = 80;
function initPage()
{
table.parentNode.style.width = tableWidth + "%";
displayInputDialog();
var row1 = new menuItem("test");
}
function displayInputDialog()
{
var tr = document.createElement(''tr'');
tr.setAttribute("id", "rInputDialog");
tr.style.height = "20%";
var td = document.createElement(''td'');
textarea = document.createElement(''textarea'');
textarea.setAttribute("name", "inputDialog");
textarea.setAttribute("id", "inputDialog");
textarea.style.width = "100%";
textarea.style.height = "100%";
textarea.style.borderStyle = "ridge";
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(textarea);
}
function menuItem (menuTitle)
{
var tr1 = document.createElement(''tr'');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement(''td'');
var b = document.createElement(''b'');
var titleSpan = document.createElement(''span'');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement(''tr'');
var td2 = document.createElement(''td'');
table.appendChild(tr2);
tr2.appendChild(td2);
tr2.style.borderStyle = ''ridge'';
tr2.style.borderColor = "green";
td2.innerHTML = ''blah'';
titleSpan.onClick = function()
{
var textarea = document.getElementById(''inputDialog'');
textarea.value = "blah"
}
}
initPage();
//************ CODE END ************
Many thanks for your input.
If you can offer any more constructive criticism, it would be received
gracefully as I would rather do this right, than go about it the wrong
way.
Daz.
Daz a écrit :Thanks ASM. my table variable is actually a reference to tbody. You''re
right, though. I should have named it tbody and not table.
I still can''t get it to work. For some reason, the toggle function is
not working at all. I have tried adding the function to the onClick
event directly, and it still doesn''t work... I don''t even get an
error/warning in my JavaScript Console...
I know it''s something I am doing wrong, I just can''t figure out what.
Here is my code. It looks messy because I am trying to figure out how
things work...
//********** CODE START **********
var table = document.getElementById(''ctg_table'');
var tableWidth = 80;
function initPage()
{
table.parentNode.style.width = tableWidth + "%";
displayInputDialog();
var row1 = new menuItem("test");
}
function displayInputDialog()
{
var tr = document.createElement(''tr'');
tr.setAttribute("id", "rInputDialog");
tr.style.height = "20%";
var td = document.createElement(''td'');
textarea = document.createElement(''textarea'');IE would prefer :
textarea.name = "inputDialog";
textarea.id = "inputDialog";
textarea.setAttribute("name", "inputDialog");
textarea.setAttribute("id", "inputDialog");
textarea.style.width = "100%";
textarea.style.height = "100%";
textarea.style.borderStyle = "ridge";
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(textarea);why do you append something to your td not more there ?
td.appendChild(textarea); // from inside
tr.appendChild(td); // to outside
table.appendChild(tr); // boxes
}
function menuItem (menuTitle)
{
var tr1 = document.createElement(''tr'');
tr1.style.backgroundColor = "blue";
var td1 = document.createElement(''td'');
var b = document.createElement(''b'');
var titleSpan = document.createElement(''span'');
titleSpan.style.color = "white";
table.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(b);
b.appendChild(titleSpan);
titleSpan.innerHTML = menuTitle;
var tr2 = document.createElement(''tr'');
var td2 = document.createElement(''td'');Same as I previously said : better to append in right order
p or span -td -tr -tbody -table -body
table.appendChild(tr2);
tr2.appendChild(td2);
tr2.style.borderStyle = ''ridge'';
tr2.style.borderColor = "green";
td2.innerHTML = ''blah'';
titleSpan.onClick = function()perhaps :
titleSpan.onclick = function()
{alert(''seen'');
var textarea = document.getElementById(''inputDialog'');
textarea.value = "blah"
}
}
initPage();
//************ CODE END ************
Many thanks for your input.a question : is this table in a form ?
这篇关于动态添加onClick事件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
