Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Access row data from a table within tables

    I have a table within a table, that is to say the table is embedded in a <tr> tag in another table and would like to extract row and cell data to make an ajax call. The table in question has several input fields and a submit button on each row. While I can find the table where the submit came from and can get the data from the <td> elements which contain data i.e.<? echo AsOfDate; ?>, I can't find the correct syntax to retrieve the data from the input fields in that same row.
    Can someone give me the correct syntax to retrieve the input data?

    Thanks,
    Tom

    var AssetTbl = document.getElementsByTagName('table');
    for (i =0; i< AssetTbl.length; i++)
    {
    if (AssetTbl[i].id == "tblAssetHx")
    {
    RowID =AssetTbl[i].rows[1].cells[0].childNodes[0].data;
    if (RowID == ID)
    {
    // this syntax works to get the data from the non input fields
    // alert(AssetTbl[i].rows[1].cells[0].childNodes[0].data);
    // this doesn't work to get the input field data obviously! alert(document.getElementById('AssetTbl[i]').rows[1].cells[5].childNodes[0].data);
    }
    }
    }

    Table row HTML
    <tr>
    <td><? echo $AssetID; ?></td>
    <td><? echo $LastAsOfDate; ?></td>
    <td><? echo $LastQuantity; ?></td>
    <td><? echo $LastPrice; ?></td>
    <td><? echo $LastCurrentValue; ?></td>
    <td><input name="txtAsOfDate" id="txtAsOfDate" type="text" /></td>
    <td><input name="txtQuantity" id="txtQuantity" type="text" /></td>
    <td><input name="txtPrice" id="txtPrice" type="text" /></td>
    <td><input name="txtCurrentValue" id="txtCurrentValue" type="text" /></td>
    <td><input name="Submit" type="submit" value="Submit" onclick="GetAssetHxData(<? echo $AssetID; ?>)" /></td>
    </tr>

  2. Users who have thanked tcl4p for this post:

    TinyScript (04-23-2010)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Form fields, in general, have a value property that contains, what else, their value.

    Certainly true of <input type=text> fields.

    Your JS code would seem to say that you have multiple <table>s all with the same ID. Not a good idea. Maybe the same className or maybe the same ID *prefix*, but not the same ID.

    But in any case, why find the tables and then find the rows? Why not just put a specific className on the target <tr> of each <table>??

    Other strange things. How can all those <input> fields have the same name? Without [] on the end of the name? Won't PHP choke on that when the <form> is submitted to it? Or is intended that each <tr> is a <form> unto itself?

    If that's the intent, then why not:
    Code:
    <tr class="assetFormRow">
        <form action="whatever.php" method="post">
        <input type="hidden" name="assetID" value="<? echo $AssetID; ?>" />
        <td><? echo $AssetID; ?></td>
        <td><? echo $LastAsOfDate; ?></td>
        <td><? echo $LastQuantity; ?></td>
        <td><? echo $LastPrice; ?></td>
        <td><? echo $LastCurrentValue; ?></td>
        <td><input name="txtAsOfDate" type="text" /></td>
        <td><input name="txtQuantity" type="text" /></td>
        <td><input name="txtPrice" type="text" /></td>
        <td><input name="txtCurrentValue" type="text" /></td>
        <td><input name="Submit" type="submit" value="Submit" /></td>
        </form>
    </tr>
    ???

    And then you can simply do:
    Code:
    var allRows = document.getElementsByTagName("TR");
    for (i =0; i< allRows.length; i++)
    {
        if ( allRows[i].className == "assetFormRow" )
        {
            var row = allRows[i]; 
            var cell0 = row.cells[0]; // first cell
            RowID = cell0.childNodes[0].data; // or you could do cell0.innerHTML
            if (RowID == ID)
            { 
                var inputs = row.getElementsByTagName("INPUT");
                // and then one example:
                var price = parseFloat( inputs[2].value );
                 ... etc ...
            }
        }
    }
    But of course many many ways to skin this cat.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    TinyScript (04-23-2010)

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for the reply and I appreciate the feedback. Normally, I wouldn't have coded the UI thing this way, but it's what the user wants, so I hear and obey. I'm fairly new to javascript, but have grown to have a healthy respect for its abilities. I'll give your code a go and hope you can give any additional assistance if needed.

    Regards,
    Tom

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Well, i learned something new, so I gotta thank both of you guys. I didn't know about using rows[] and cells[]. I just have never been using tables, so I didn't ever come across this.

    Thanks a million.

    Code:
    <html><head></head><body>
    <style>
    
    
    </style>
    <script>
    window.onload=function(){
    var AssetTbl = document.getElementsByTagName('table');
    
    if (AssetTbl[0].id == "tblAssetHx"){
    
    var ID=AssetTbl[0].id
    
    RowID =AssetTbl[0].rows[0].cells[0].childNodes[0].data;
    
    
    if (RowID == ID){
    		
    	var ROW5=AssetTbl[0].rows[0].cells[5].childNodes
    
    // this syntax works to get the data from the non input fields
    // alert(AssetTbl[0].rows[0].cells[1].childNodes[0].data);
    // this doesn't work to get the input field data obviously! 
    
    
    		var child=0;
    
    		while ( ROW5[child]){//if this array has a childNode at this index value; if index > array.length-1
    
    			if(!ROW5[child].value){		//if this does not have a value attribute
    
    if(!ROW5[child].data){		
    		alert(ROW5[child].innerHTML)
    	}else{
    
    alert(ROW5[child].data)
    
    };
    
    			}else{				//else it must have a value attribute
    				alert(ROW5[child].value);
    			}
    		child++
    		}
    
    	}
    }
    
    
    }
    </script>
    <table id="tblAssetHx">
    <tr>
    <td>tblAssetHx</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td><input name="txtAsOfDate" id="txtAsOfDate" type="text" value="some childNode value" >some childNode.data</input><span>Next childNode</span></td>
    <td><input name="txtQuantity" id="txtQuantity" type="text" /></td>
    <td><input name="txtPrice" id="txtPrice" type="text" /></td>
    <td><input name="txtCurrentValue" id="txtCurrentValue" type="text" /></td>
    <td><input name="Submit" type="submit" value="Submit" onclick="GetAssetHxData('tblAssetHx')" /></td>
    
    </table>
    </body></html>
    Last edited by TinyScript; 04-23-2010 at 02:47 AM.

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Old Pendant,
    Your code worked like a champ! Thanks so very much.

    Regards,
    Tom

  • #6
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Old Pendant,
    I'd like to calculate the CurrentValue (quantity * price) using OnBlur event from the price field. Is there any way to determine the exact row the event is taking place in order to value the txtCurrentValue field? In the submit I pass the ID of the key field with the on click event and use it in the loop until you can match the ID to the row ID and know your in the right place. But I haven't been able to find a way to set the field with the OnBlur.

    Thanks,
    Tom

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    ???

    So *do* you have each set of input's in a separate <form>, as I showed?? If so, it's trivial:
    Code:
    <input name="txtPrice" 
    onblur="this.form.txtCurrentValue.value=(this.value * this.form.txtQuantity.value).toFixed(2);" />
    
    <input name="txtQuantity" 
    onblur="this.form.txtCurrentValue.value=(this.value * this.form.txtPrice.value).toFixed(2);" />
    ??

    But if you don't have individual <form>s, then of course it's lots more complicated.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Except I'd almost always prefer onchange over onblur. Why recalculate just because the user tabbed across a field??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    thanks for the reply. On the forms, I didn't have separate forms included, but I'll change the code to add them. It's starting to make more sense now as I get more familiar with the DOM. I'll give the changes a try and let you know how it goes.

    Thanks again,
    Tom

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you intend to process the <form>(s) with PHP, you have to either make each one separate or change the field names.

    To change the field names, you could either tack [] onto the end of each name (so that PHP sees each same-named field as an element in an array of that name) or you could append a number to each (either a sequential number or perhaps the assetID that matches the data).

    Separate forms will simplify things on the client side, but whether that works on the PHP side only you will know. With separate forms, unless you do something like update via AJAX, you'll have to rebuild the page each time the user clicks the submit button for any of the <form>s.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ouch! I hear ya and while things are working OK I think it's better to put in the extra time using the forms. That said, this may take some time to make the conversion, but I think it's worth the effort if only for the learning process. I plan on using ajax (another learning curve) calls, so I'm hoping to work around the php postback.
    I appreciate all the time and suggestions you've given me.
    Have a good weekend.

    Regards,
    tom

  • #12
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Old Pendant,
    If your still out there I'm in the cellar again. Wouldn't you know it the user decides they want a different UI design. So I change things around, but I'm having a problem with the javascript. I have the following code below. I tried to put together a combination of a loop through the table and a loop through the row. The reason for this approach was because the table loop allowed me to address the non input fields. Obtaining those values all I needed to do was to loop through the rows for the table using the code you gave me to get the input field data which worked before, but now the row code doesn't work. If I did a loop through the rows it worked fine using
    "var allRows = document.getElementsByTagName("TR").
    The problem is when I try to get the row data for the table rows using
    var allRows = AssetTbl[i].document.getElementsByTagName("TR");
    Could sure use some help with this one.

    function GetCurrentValue()
    {
    var i;
    var AssetHxID = false;
    var data;
    var RowID;


    var AssetTbl = document.getElementsByTagName('table');
    for (i =0; i< AssetTbl.length; i++)
    {
    if (AssetTbl[i].id == "tblAssetHx")
    {
    alert("Table data " + AssetTbl[i].rows[0].cells[0].childNodes[0].data);
    ' this works fine to get the non input field value
    ' I run into problems here trying to get the same row data for the input fields.
    var allRows = AssetTbl[i].document.getElementsByTagName("TR");
    for (i =0; i< allRows.length; i++)
    {
    if ( allRows[i].className == "assetFormRow" )
    {
    var row = allRows[i];
    var cell0 = row.cells[0]; // first cell
    RowID = cell0.childNodes[0].data; // or you could do cell0.innerHTML
    var inputs = row.getElementsByTagName("INPUT");
    // and then one example:
    var price = parseFloat( inputs[2].value );
    }// end if
    }// end for
    }// end if
    }// end for
    }

    Here's the table def:
    <table width="100%" border="0" bgcolor="#F0F0F0" id="tblAsset">
    <tr>
    <td colspan="4">
    <table width="100%" bgcolor="#FFFFFF" id="tblAssetHx" name="tblAssetHx" style="border:thin solid black; border-collapse; border-style: ridge;">
    <div class="AssetHx">
    <? GetAssetHxData($AssetID); ?>
    <tr class="AssetRow">
    <td width="2%"><? echo $AssetID; ?></td>
    <td width="5%"><a href="anum.php?ID=<? echo $AssetID; ?>"><img src=pencil.gif border=0></a></td>
    <td width="5%"><b><? echo $Symbol; ?></b></td>
    <td width="15%"><? echo $Description; ?></td>
    <td width="15%"><? echo $AccountType . " - " . $Account; ?></td>
    <td width="5%"><? echo $LastAsOfDate; ?></td>
    <td width="5%" align="right"><? echo number_format($LastQuantity,4); ?></td>
    <td width="5%" align="right"><? echo '$'.number_format($LastPrice, 2); ?></td>
    <td width="5%" align="right"><? echo '$'.number_format($LastCurrentValue,2); ?></td>
    <td width="10%" align="right"><input name="txtQuantity" id="txtQuantity" type="text" value="<? echo number_format($LastQuantity,4); ?>" style="text-align:right;" /></td>
    <td width="10%"><input name="txtPrice" id="txtPrice" type="text" style="text-align:right;" /></td>
    <td width="10%"><input name="txtCurrentValue" id="txtCurrentValue" type="text" style="text-align:right;" /></td>
    </tr>
    </table>
    </div>
    </td>
    <tr>
    </table>

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
              function init(){
    
    		var nTable = document.getElementById('tblAsset');
    		var nRow = nTable.getElementsByTagName('tr')[1];
    		var nCell = nRow.getElementsByTagName('td');		
    		for (i=0; i<nCell.length; i++)
    			{
    			 var nInputType = nCell[i].getElementsByTagName('input');
    			 var nAnchorType = nCell[i].getElementsByTagName('a');			 
    			 if (nInputType.length == 0 && nAnchorType.length == 0)
    				{
    				 alert(nCell[i].firstChild.data);					
    				}
    			}
    		var nInput = nTable.getElementsByTagName('input');
    		for (i=0; i<nInput.length; i++)
    			{
    			 alert(nInput[i].value);
    			}	
              }
    
              navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); 
    
    </script>
    <style type="text/css">
    
    	  table.c3 {background-color: #F0F0F0;}
              table.c2 {background-color: #FFFFFF; border: 1px solid black;}
              input.c1 {text-align: right;}
    	 .bold {font-weight: bold;}
    
    </style>
    </head>
         <body>
              <table class="c3" width="100%" border="0" id="tblAsset">
    	    <tbody>
                   <tr>
                        <td colspan="4">
                             <div class="AssetHx">
    				<? GetAssetHxData($AssetID); ?>
                             </div>
                             <table width="100%" id="tblAssetHx" class="c2">
                                  <tr class="AssetRow">
                                       <td width="2%"><? echo $AssetID; ?></td>
                                       <td width="5%"><a href="anum.php?ID=%3C?%20echo%20$AssetID;%20?%3E"><img src="pencil.gif" border="0" alt="#########"></a></td>
                                       <td width="5%" class="bold"><? echo $Symbol; ?></td>
                                       <td width="15%"><? echo $Description; ?></td>
                                       <td width="15%"><? echo $AccountType . " - " . $Account; ?></td>
                                       <td width="5%"><? echo $LastAsOfDate; ?></td>
                                       <td width="5%" align="right"><? echo number_format($LastQuantity,4); ?></td>
                                       <td width="5%" align="right"><? echo '$'.number_format($LastPrice, 2); ?></td>
                                       <td width="5%" align="right"><? echo '$'.number_format($LastCurrentValue,2); ?></td>
                                       <td width="10%" align="right"><input name="txtQuantity" type="text" value="&lt;? echo number_format($LastQuantity,4); ?&gt;" class="c1"></td>
                                       <td width="10%"><input name="txtPrice" type="text" class="c1" value="0.00"></td>
                                       <td width="10%"><input name="txtCurrentValue" type="text" class="c1" value="0.00"></td>
                                  </tr>
                             </table>
                        </td>
                   </tr>
                </tbody>
              </table>
         </body>
    </html>

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Unless I'm mistaken, Sciliano, despite what he showed he *really* has SEVERAL tables with id="tblAssetHx" (that was the problem he had in original post, and I think he's still making the mistake of having multiple objects with the same id).

    tcl4p: Can you confirm/deny that??

    Once again, you should NOT have more than one object with the same ID.

    Ignore this post if tcl4p says I'm wrong about the multiple tables.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Mar 2008
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post
    Old Pendant, Sciliano,
    thanks guy. I was able to tweak the code and get everything to work. I do have one question that maybe you could answer. why are these two statements different: The first works and the second does not, but it would seem to me they're equivalent.

    Thanks, grazie,
    Tom

    var MyTable = AssetTbl[i];
    var irow = MyTable.getElementsByTagName('tr');

    and

    var irow = AssetTbl[i].getElementsByTagName('tr');


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •