SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with Adding Rows

    Hello

    I have structure like below in my page, somehow it seems invalid. may be you people guide me.

    HTML Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <div id="datarow">
    	 <tr><td></td></tr>
        </div>
    </table>
    I am using getElementbyID.innerHTML to add new data row like this
    HTML Code:
    var a = document.getElementbyId("datarow").innerHTML;
    document.getElementbyId("datarow").innerHTML = a + "<tr><td>[B]NEW DATA[/B]</td></tr>";
    in Firefox it is working good, and add a new row. but in IE it do not add the data below the first row, it add data at the Right of the First data.

    you can check it hree http://zeeshanhashmi.110mb.com/jscript/test.html run this and see the results in FF and IE.

    Please guide

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't think <div> is an allowed child of <table>... that should definitely be changed. I would also construct rows with the DOM and append them to the table rather than changing the innerHTML.

  3. #3
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u please guide me how to do that with DOM ? I am not very good at it.

    Please guide !

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works perfectly in FF3 and IE7.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Add TR</title>
    </head>
    <script language="javascript" type="text/javascript">
    
    function doAddTr(arrTds, tblName){
    	var tbl = document.getElementById(tblName);
    	if(arrTds.length >= 1 && tbl){
    		var tr = document.createElement('tr');
    		for(var i = 0; i < arrTds.length; i++){
    			var td = document.createElement('td');
    			td.innerHTML = arrTds[i];
    			tr.appendChild(td);
    		}
    		tbl.appendChild(tr);
    	}
    }
    // function to delete the tr
    function doRmTr(obj){
    	var parent_td 	= obj.parentNode;
    	var parent_tr 	= parent_td.parentNode;
    	if(parent_tr){
    		var divas 	= parent_tr.parentNode;
    		divas.removeChild(parent_tr);
    	}
    }
    
    // Add new size row
    function AddNew(){
    	var td1 = '<input type="text" name="name[]" />';
    	var td2 = '<input type="text" name="name[]" />';
    	var td3 = '<a href="javascript:void(null);" onClick="doRmTr(this)">X</a>' + "\n";
    	
    	var arrTds = new Array(td1, td2, td3);
    	doAddTr(arrTds, 'tblData');
    }
    
    </script>
    <body>
    <table width="500" cellpadding="2" cellspacing="0" style="border:1px solid #cccccc;">
    	<tbody id="tblData">
        	<tr>
                <td style="background-color:#e4e4e4;" width="40&#37;">Name</td>
                <td style="background-color:#e4e4e4;" width="50%">Address</td>
                <td style="background-color:#e4e4e4;" width="10%">&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <div style="text-align:right;height:25px;padding:2px;width:500px;"><a href="javascript:void(null);" onClick="AddNew();">Add New</a></div>
    </body>
    </html>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


Bookmarks

Posting Permissions

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