How to : Display table and select a cell to return value from a div

Just capture the innerHTML of the selected element with an onClick event that runs a function that closes the popup div and launches the new xmlhttp event:

<div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>

Select allOpen in new window

You have not posted any code so I don't know what the actual stucture and contents look like, but I think you just have to parse out the data you need to make the unique identification, and then you are off to the races.

OOP!

Displaying the data.

Create the popup with these CSS properties:

#hiddenBox{position:absolute;top:100;left:100;z-index:10;display:none}
// add additional properties for dimensions and appearance as required.
// this assumes you have created the element with an id of 'hiddenBox'

Select allOpen in new window

when you want it to show use Javascript to change the display property value:

document.getElementById('hiddenBox').style.display='block';   //shows it
document.getElementById('hiddenBox').style.display='none';  // hides it again

Select allOpen in new window

so <div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>  will automatically operate on the cell I am on regardelss of how many rows are in the table?

Thanks

Every element that has that onClick event will return its contents. So in this case the function would receive the string "John Smith id:444". The function would get the value in its parameter so:

function myFunction(x)
{
   alert(x);
}
Would display John Smith id:444

All the function has to do is parse out the part you need to run your selection processing.

I am lost.   I don't understand how to make <div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>   work.

I am able to get the data and display the data as I needed.  It was easy as you suggested.  

This is the code that generates the table form the xml file.

 

function displayData2(response)  
    {  
    var xmlEl2 = response.getElementsByTagName("Client");
    var table = document.createElement("table");
    table.border = "0";
	table.width="90%";
	table.height="20%";
	table.backgroundColor = "#FFFFFFF";
	table.overflow="SCROLL";
	table.align="CENTER";
	var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl2[0].childNodes.length; colHead++) {
        if (xmlEl2[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl2[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#FFFFFF";
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl2.length; i++) {
        var row = document.createElement("tr");
        // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl2[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
            var lookitup = document.createTextNode(xmlEl2[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#FFFFFF";
            }
            td.align="left"
			td.height="20%"
			td.overflow="auto"
			td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
			td.style.fontweight = "BOLD";
			td.appendChild(lookitup);
            row.appendChild(td);
			//td.onclick="gogetit(this.innerHTML)";
        }
        tbody.appendChild(row);
		td.onclick="gogetit(this.innerHTML)";
    }
	document.getElementById("lookitup").innerHTML="";
    document.getElementById("lookitup").appendChild(table);
	document.getElementById('lookitup').style.display='block';   //shows it

Select allOpen in new window

I added the function call to gogetit() to the end of displaydata2.  

When it returns x it is ALL of the html for the entire table is returned.  I need just the value of column 1, Contract_no, for the row I select to be returned so I can do a lookup on the contract_no.  Is that possible?

This is that simple function:
 

function gogetit(x){  
alert(x)
/// where I will do the next ajax lookup based on the return
document.getElementById('lookitup').style.display='none';
}

Select allOpen in new window

This is a screenshot.
Thanks again

Charlie

I didn' realize you were dynamically building the table client side.  

I think you need to attach the event before you append the td to the tr

                        td.align="left"
			td.height="20%"
			td.overflow="auto"
			td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
                        td.style.fontSize = "12px";
			td.style.fontweight = "BOLD";
			td.onclick=function(){gogetit(this.innerHTML);}

Select allOpen in new window

The this was being applied to the wrong element.

If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML

Not really sure how to do that.  I will play with it.

Thanks

If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML

If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML

Could you point out where to add the id.  I have tried for almost 2 days with no luck.  I even  built the table a different way from another question here but i still only get all the html returned not just the info in the cell or row I click.  

Thanks

setAttribute should work for the id:

td.setAttribute("id","cell1");
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById('cell1').innerHTML);};

Select allOpen in new window

You might want to try using set attribute on any property that is not setting correctly.

For testing, I would leave out the styling stuff and concentrate on getting the innerHTML, and then add the styling after you have nailed down the functionality.

Sorry I am so clueless.  I really appreciate your help with this.  

I think I (we) am almost there


 

td.setAttribute("id","cell1");
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById('cell1').innerHTML);};

Select allOpen in new window

Now when I click instead of all the html populating I get the Contract_no (what I need!!!) from the first cell of the 1st row only regardless of what cell I click on.  

Thank you !

 

You are giving each cell a unique id and using that in the function ... right?  If not the reference will be to the first occurrence of the id.

If they are unique, look at the source after the table is generated.  That might give us a clue where we have it wrong.

The source shows that EVERY cell in every row has the ID of cell1

<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">426292 </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Gary </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Aiken </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">SC</td>
</tr>
<tr>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">317111 </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Lester </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Apopka </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">FL</td>

Thanks again

Okay I was thinking you might have done that.  I should have been clearer.  You need unique Ids so use the index values to create a one of a kind string:

cellID='R'+i+'C'+j;  // that should give you R1C1... R1C2.. R1C3...R2C1... etc
td.setAttribute("id",cellID);
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById(cellID).innerHTML);};

Select allOpen in new window

Now the id should target just a single cell.  Sorry I didn't pickup on the fact you were using the literal.  

Yea, the literal <G>  I feel like a freakin idiot here, spent literally 10 hrs yesterday but I still cant get it to work even with your help.  

The html (firebug)for the table comes back like this, using only odd numbers for the R + C values if that matters  The ROC1 id is exactly what I need to return, the Contract_no 426292
 

<tr>
<td id="R0C1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">426292 </td>
<td id="R0C3" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="R0C5" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Gary </td>
<td id="R0C7" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Aiken </td>
<td id="R0C9" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">SC</td>

Select allOpen in new window

gogetit is returning the last value in the last row of the table.  In this case it is the state=KY
 
gogetit is as you suggested
 

function gogetit(x) 
alert(x);
document.getElementById('lookitup').style.display='none';

Select allOpen in new window

I checked it with several record sets, the last value of the last row every time.

Thanks again

Charlie  

OOOOOOOOOOOOPS!

td.onclick=function(){gogetit(documentgetElementById(this.id).innerHTML);};

Select allOpen in new window

cellID is still set to the value of the last id generate.  I think I need more coffee.

I owe you a POT full.  Thanks so much it works great.    I have a quick (for you) question.

I need to change the gogetit function to trigger a new lookup.  
 

function gogetit(x)
document.getElementById('lookitup').style.display='none'; 
document.getElementById('searchFor').value=x;

Select allOpen in new window

This does not work.  after I hide the table it does nothing.   Is there a proper syntax.  

Should I post a new question?

Thanks again

THANKS!!!!!   Ever in the Asheville, NC - Knoxville, TN area I owe you dinner.
let me know c.derosa.tn@gmail.com

Wonderful Wonderful Wonderful.  Thanks again

Glad I could help.

Thanks for the dinner offer, but I have not been to the U. S. in a long time.

BTW it is not good to post your email like that.  It can get picked up by spambots and you end up with hundreds of emails you really don't want.  You might want to ask Community Support to edit that address out.

Thanks for the tip.  

Again I really appreciate your patience in helping me