Ajax: Adding new rows to table.

I'm trying to figure out how to insert new rows into a table after making an Ajax call.  I want to insert the new rows right before the row I click on.  I have a cfc that I'm calling with Ajax and it's passing back the data already formatted into table rows.  Not sure of the best way of doing this.  Below is some of the code that I'm using.  Also, please let me know if I should do some of this a different way.


P.S. I'm using the ajax engine from lalabird.com

Thanks,
Tim
<!---  The method I'm calling --->
<cffunction name="dailyTotals" access="remote"  returntype="void" output="true">
	<cfargument name="department" type="string" required="yes" />
 
	<cfstoredproc procedure="sp_OMR_qry_DailyHours" datasource="#session.database#" username="#session.DBID#" password="#session.DBPass#" >
		<cfprocparam type="in" cfsqltype="cf_sql_varchar" dbvarname="department" value="#arguments.department#" null="no" />
		<cfprocresult name="qry_dailyhours" resultset="1" />
	</cfstoredproc>
	
	
	<cfsavecontent variable="content">
		<cfoutput query="qry_dailyhours">
		<cfset sumHours = 0>
 
		<tr >
			<cfset rowClass = "reportDataRow#Int(qry_dailyhours.CurrentRow MOD 2)#">
			<td class="#rowClass#"></td>
			<td class="#rowClass#">#DateFormat(qry_dailyhours.recordDate, "MM/DD/YYYY")#</td>
			<!--- <td>#qry_dailyhours.TimecardWeek#</td> --->
			<!--- <td>#qry_hours.SupDepartment#</td> --->
			<td class="#rowClass#"><cfif #qry_dailyhours.Direct# EQ "">0<cfelse>#Round(qry_dailyhours.Direct)# <cfset sumHours = sumHours + qry_dailyhours.Direct></cfif></td>
			<td class="#rowClass#"><cfif #qry_dailyhours.indirect# EQ "">0<cfelse>#Round(qry_dailyhours.Indirect)# <cfset sumHours = sumHours + qry_dailyhours.Indirect></cfif></td>
			<td class="#rowClass#"><cfif #qry_dailyhours.Nonop# EQ "">0<cfelse>#Round(qry_dailyhours.NonOp)# <cfset sumHours = sumHours + qry_dailyhours.Nonop></cfif></td>
			<td class="#rowClass#">#Round(sumHours)#</td>
			<td class="#rowClass#">#Round(qry_dailyhours.OT)#</td>
			<td class="#rowClass#"><cfif sumHours NEQ '0'>#DecimalFormat((qry_dailyhours.OT/sumHours)*100)#%</cfif></td>
		</tr>
	
		</cfoutput>
	</cfsavecontent>
	
	<cfwddx action="CFML2JS" input="#content#" toplevelvariable="r">
</cffunction>
 
<!--- How I'm calling the method --->
	function get_week(department,weekend){ 
		param = 'department='+ department + '&weekend=' + weekend;
    	http( 'POST'  , 'components/ajax.cfc?method=dailyTotals' , add_rows, param); 
    }
 
What is the best way to write the add_rows function?

Open in new window

LVL 15
tim_csAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
Hopefully this helps
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Before and After </title>
<script type='text/javascript'>
  function $( id ) {
    return document.getElementById( id );  
  }
  
  function hilite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass ) {
        klass += ' hilite';
      } else {
        klass = 'hilite';
      }
      tds[ i ].setAttribute( 'class', klass );
      tds[ i ].className = klass;
    }
  }
 
  function lolite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass && ( klass.search( /\bhilite\b/ ) > -1 ) ) {
        klass = klass.replace( /\bhilite\b/, '' );
        tds[ i ].setAttribute( 'class', klass );
        tds[ i ].className = klass;
      }
    }
  }
 
  function After( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    var row = here.cloneNode( true );
    here.parentNode.insertBefore( row, here.nextSibling);
    lolite( here.parentNode );
    hilite( row );
  }
 
  function Before( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    var row = here.cloneNode( true );
    here.parentNode.insertBefore( row, here );
    lolite( here.parentNode );
    hilite( row );
  }
</script>
<style type='text/css'>
  .hilite { background-color : yellow; }
</style>
</head>
<body>
 
<table border='1'>
 
  <tr>
    <td>uno</td>
    <td>dos</td>
    <td>tres</td>
    <td>quatro</td>
    <td>...</td>
    <td><input type='button' value='After'  onclick='After(this)' />
    <td><input type='button' value='Before' onclick='Before(this)' />
    </td>
  </tr>
 
  <tr>
    <td>Now</td>
    <td>is</td>
    <td>the</td>
    <td>time</td>
    <td>...</td>
    <td><input type='button' value='After'  onclick='After(this)' />
    <td><input type='button' value='Before' onclick='Before(this)' />
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stanscott2Commented:
The best way to do this is probably using something like this:

function addToTable(tblName) {
     var tbl = document.getElementById(tblName);     // set reference to table
     var tblBody = tbl.getElementsByTagName("tbody")[0];     // set reference to tbody.  All rows are added to this
     for (t=0;  t<xxx; t++) {   // pseudocode -- replace xxx with a counter for the number of new rows
          var newRow = document.createElement("TR");  // create a new row
          newRow.innerHTML = something;    // replace something with the entire new row
          tblBody.appendChild(newRow);       // appends new row at end
      }
}

I've used the innerHTML property because the information is coming down as HTML.  My preference is to return the data as XML and then parse it into individual cells.  In that situation, you can keep adding new TD elements, and appending text nodes to them containing the information coming back.  One big advantage here is that you don't need to return redundant data, such as the rowClass style.  Just add the style in the loop, above.




}
0
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.