HTML "onclick" event in JavaScript (In a table)

Question

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.write statements Here is an examples of a table cell in 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.

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(..).

Don't use document.write. Use appendChild or jQuery or similar. — Alec Gorge
– Alec Gorge, Commented Jul 5, 2012 at 14:32
In which Browser does this not work? Your line works fine in Safari, Chrome and Firefox. Didn't test IE … And as stated before, it's good practice to use something else than document.write. — insertusernamehere
– insertusernamehere, Commented Jul 5, 2012 at 14:37
If you wanna generate the attribute dinamically read my answer... hope this helps! — Vincenzo Maggio
– Vincenzo Maggio, Commented Jul 5, 2012 at 14:39

MaxArt · Accepted Answer · 2012-07-05 14:38:11Z

3

Your style of Javascript programming is ancient, to say the least. document.write is a function developed mainly when there were almost no common methods to generate dynamic content.

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.

Then, you can attach event listeners using something more modern than the traditional way like onclick, like addEventListener. Here's a snippet:

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 row is the row of the table that you're generating.

Unfortunately, IE<9 uses a different method called attachEvent, so it'd become:

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

answered Jul 5, 2012 at 14:38

MaxArt

22.8k10 gold badges85 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

William Dao Over a year ago

Ok Thanks This worked to my liking (although getting the functions to work in a for loop was another issue but I managed to solve that as well.). It seems that I have a lot to learn about JavaScript (although I still see myself as a beginner)

MaxArt Over a year ago

Don't worry, Javascript has a very good learning curve. You'll discover it by yourself in a month :)

Vincenzo Maggio · Accepted Answer · 2012-07-05 14:36:37Z

0

You can modify attributes in HTML using function setAttribute(Attribute, Value).

With this function you can generate the cell code and define dinamically the attribute.

answered Jul 5, 2012 at 14:36

Vincenzo Maggio

3,86928 silver badges42 bronze badges

Comments

jbabey · Accepted Answer · 2012-07-05 14:37:12Z

0

You should not use document.write to add elements to your page, there are javascript functions for this:

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/

answered Jul 5, 2012 at 14:37

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Durgaprasad Budhwani · Accepted Answer · 2012-07-05 14:38:13Z

0

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.

answered Jul 5, 2012 at 14:38

Durgaprasad Budhwani

9878 silver badges18 bronze badges

2 Comments

William Dao Over a year ago

Thanks. I sorta know this will work but one issue of mine is that because the table is dynamically allocated, I have no control on the id of the element due to the fact that I don't know how many row's there will be

Durgaprasad Budhwani Over a year ago

you can do one more thing, keep the class name of each id same like 'tdClass' and parameter like "1,'plan',1" you can make then as data attribute like data-first="1", data-second="plan", data-third="1" and by using jquery on 'tdClass' class click even you can get the data and then you can click the appropriate event. If you want I will write code for you :) – Pushkar just now e

Collectives™ on Stack Overflow

HTML "onclick" event in JavaScript (In a table)

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related