www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I add file input in a new row?

  1. #1
    Join Date
    Nov 2011
    Posts
    27

    How do I add file input in a new row?

    Hi,

    When a user adds a row in a table, it should display the input "file" feature under the "Image" column for each row so that the user can select a file for each row. But it does not display the file input within the row when I add a row.

    Below is the html code:

    Code:
        <table id="qandatbl" border="1">
        <tr>
            <th class="image">Image</th>
        </tr>
        </table>
    Below is jquery code

    Code:
      function insertQuestion(form) {   
            
            var $tr = $("<tr></tr>");
            var $image = $("<td class='image'></td>");
            
            function image(){
        	    
        	var $this = $(this);
        	var $imagefile = $("<input type='file' name='imageFile' id='imageFile' />").attr('name',$this.attr('name'))
            				 .attr('value',$this.val())
            				 
            	$image.append($imagefile);
            
            };
            
            $tr.append($image);
            $('#qandatbl').append($tr);
        
        	        	        
        }

  2. #2
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    I don't use Jquery. I don't know Jquery.
    As far as I know you must add <tbody> ..... </tbody> in code.

    Message box displays <tbody>....</tbody> in Firefox.
    Code:
      
    <table id="mytable" border="1">
        <tr>
            <th class="image">Image</th>
        </tr>
       
        </table>
    
    <script type="text/javascript">
    var el= document.getElementById('mytable');
    alert(el.innerHTML);  // it displays <tbody>....</tbody> in Firefox.
      
    </script>
    My code is working in Firefox.
    Code:
      
    
    <script type="text/javascript">
    
    function addRow(){
    
    var tr = "<tr></tr>";
    var td = "<td></td>";
    var inp = "<input type='file' name='imageFile' id='imageFile'>";
    td= td.replace(/(d>)/, "$1"+inp );
    tr= tr.replace(/(r>)/, "$1"+td );
    
    //alert(tr);
    
    var table=document.getElementById('mytable');
    
    //alert(table.innerHTML);
    
    table.innerHTML= table.innerHTML.replace(/(<\/tbody>)$/, tr + "$1");
    // alert(table.innerHTML);
    }
    
    </script>
    </head>
    <body>
      
    <input type="button" value="click me" onclick="addRow()"> 
     <table id="mytable" border="1"><tbody>
        <tr>
            <th class="image">Image</th>
        </tr>
       
        </tbody></table>
    Last edited by Ayşe; 12-28-2011 at 08:42 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    This code is working in Firefox 4.0b9
    Code:
      
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    
    function ekle() {  
            
    var $tr = $("<tr></tr>");
    
    var $image = $("<td class='image'></td>");
    
    var $imagefile = $("<input type='file' name='imageFile' id='imageFile' >")
     
    $image.append($imagefile);
               
    $tr.append($image);
    
    $('#mytable').append($tr);
        
    }
    
    </script>
    </head>
    <body>
      
    <input type="button" value="click me" onclick="ekle()"> 
     <table  border="1"><tbody id="mytable">
        <tr>
            <th class="image">Image</th>
        </tr>
       
        </tbody></table>
    Last edited by Ayşe; 12-29-2011 at 02:26 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  4. #4
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by Ayşe View Post
    As far as I know you must add <tbody> ..... </tbody> in code.
    No, you do not have to add a <tbody>.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles