How do I add file input in a new row?

**carlbrooks** · 12-26-2011, 09:40 PM

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);
    
    	        	        
    }

**Ayşe** · 12-28-2011, 07:54 AM

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>

**Ayşe** · 12-29-2011, 02:12 PM

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>