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

Answer 1

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

Answer 2

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.

Answer 3

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/

Answer 4

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.