• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 866
  • Last Modified:

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
0
Brian Bush
Asked:
Brian Bush
  • 2
  • 2
1 Solution
 
Pravin AsarCommented:
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>
0
 
Pravin AsarCommented:
If you want to use code, please do following.


1. Modify your SetSelect function  


function SetSelect(evt) {
     if (!evt) { evt = window.event; }
     var trObj;
     if (document.all) {
          trObj = evt.srcElement;
          evtType = evt.type;
     }
     else {
          trObj = evt.target;
          evtType = evt.type;
     }
     if (!trObj) { return; }
     if (trObj.style.color == "white") {
          trObj.style.backgroundColor = "";
          trObj.style.color = "";
     } else {
          trObj.style.backgroundColor = "316ac5";
          trObj.style.color = "white";
     }
}

2. Assign the function.


tRow.onclick = function () { SetSelect(event); }

0
 
Brian BushSolutions ArchitectAuthor Commented:
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
0
 
Brian BushSolutions ArchitectAuthor Commented:
OK. Works great.
My issue was with a iFrame where the code is fired
needing to bubble up to the parent frame.

--brian
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now