asked on

Dynamic Onclick Event

I dynamically build a display table.
I want people to be able to select multiple rows from the table.

I dynamically assign an onclick event to change the backgroundColor
as a visual indicator. It only seems to work with the most recent row
that has been added to the table.

Any ideas why? These are the addRow and Event functions I used:

function AddRowToTable(col1, col2){
      var tBody = parent.document.getElementById("table").getElementsByTagName("TBODY")[0];
      var tRow = parent.document.createElement("TR");
      var tCell1 = parent.document.createElement("TD");
      var tCell2 = parent.document.createElement("TD");

      tRow.onclick = SetSelect;

      tCell1.appendChild(parent.document.createTextNode(col1));
      tCell2.appendChild(parent.document.createTextNode(col2));
      tRow.appendChild(tCell1);
      tRow.appendChild(tCell2);
      tBody.appendChild(tRow);
}

function SetSelect() {
      if (this.style.color == "white") {
            this.style.backgroundColor = "";
            this.style.color = "";
      } else {
            this.style.backgroundColor = "316ac5";
            this.style.color = "white";
      }
}

--brian

Pravin Asar

Your problem seems to assign onclick function

Which can be done

tRow.onclick = function () { this.style.backgroundColor = '#F1F2F3'; }

or

You try following example .

This has a table row highlight event handler at the table level. This is cross-browser solution.
You do not have to worry about adding onclick event handler for each table row.

<style type="text/css">
TR.tableRowOver {
background-color:#99CCFF;
}
TR.tableRowOut {
background-color:#FFFFFF;
}
TR.tableRow {
background-color:#FFFF00;
}
</style>
<script language="javascript">
var curRow = null;
var curClass = null;
var normClass = 'tableRowOut';
var highClass = 'tableRowOver';
function getParent (src, tagName) {
while (src.parentNode != null) {
if (src.parentNode.tagName == tagName) {
return src.parentNode;
}
src = src.parentNode;
}
return src;
}
function ManageBgColor (evt) {
if (!evt) evt = window.event;
var trObj = null;
var evtType = null;
window.status = 'Event. ' + evt.type;
if (document.all) {
trObj = evt.srcElement;
evtType = evt.type;
}
else {
trObj = evt.target;
evtType = evt.type;
}
if (trObj.tagName == 'TD') {
trObj = getParent (trObj, 'TR');
}
if (curRow) { curRow.className = curClass; }
if (trObj) {
curClass = trObj.className;
trObj.className = highClass;
curRow = trObj;
}
}
</script>
<table id="table1" onMouseMove="ManageBgColor(event)">
<tr class="tableRowOut"><td>Row1 Cell 1</td><td>Row1 Cell 2</td></tr>
<tr class="tableRow"><td>Row2 Cell 1</td><td>Row2 Cell 2</td></tr>
<tr class="tableRowOut"><td>Row3 Cell 1</td><td>Row3 Cell 2</td></tr>
</table>

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Brian Bush

ASKER

Makes sense, but it isn't working for me.
It still only seems to provide the event on the most recent row.
Each time I add a row to the table, it seems to clear the onclick
event from the previous row and assign it to the new row.

--brian

Brian Bush

ASKER

OK. Works great.
My issue was with a iFrame where the code is fired
needing to bubble up to the parent frame.

--brian