Reputation: 53
I have created table dynamically using javascript, want to add a "href" link with the image to the table cell when table created dynamically and increase the width and height of the table cell.Please see "http://jsfiddle.net/c3X8Y/1/". In "Action" columnn of the table i want to display the href links and want to increase the width and height of the table cells.Below is the code. HTML code:
<input type="file" name="fileUpload" size="50" id="fileUploadID" multiple/></td>
</tr><br>
</table>
</td></tr> <tr><td>
<br/> <table border="1" id="uploadTable" style="visibility:hidden">
<tr> <th>SNo</th><th>FileName</th><th>Action</th> </tr>
</table>
Javascript code:
<script>
var rowN = 1;var count = 1;var a=1;
document.getElementById("fileUploadID").onchange = function() {
document.getElementById("uploadTable").style.visibility="visible";
var fileNameIndex = document.getElementById('fileUploadID').value.lastIndexOf("\\");
var file_name = document.getElementById('fileUploadID').value.substring(fileNameIndex + 1);
// Get a reference to the table
var tableRef = document.getElementById('uploadTable');
// Insert a row in the table at row index 1
var newRow = tableRef.insertRow(rowN);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode(rowN);
newCell.appendChild(newText);
// Insert a cell in the row at index 1
var newCell2 = newRow.insertCell(1);
// Append a text node to the cell
var newText2 = document.createTextNode(file_name);
newCell2.appendChild(newText2);
// Insert a cell in the row at index 2
var newCell2 = newRow.insertCell(2);
// Append a text node to the cell
var newText2 = document.createTextNode('<a href="">delete</a>');
newCell2.appendChild(newText2);
rowN++;
}
</script>
Upvotes: 0
Views: 3888
Reputation: 43166
Instead of creating an html element, you're creating a textNode in the following code:
// Append a text node to the cell
var newText2 = document.createTextNode('<a href="">delete</a>' +'<a href="">show</a>');
newCell2.appendChild(newText2);
instead, you actually have to create html elements using createElement()
function as follows:
// Append a text node to the cell
var newText2 = document.createElement('a'); //create actual HTML element
newText2.innerHTML='show'; // set the elements properties
newText2.href="#";
newCell2.appendChild(newText2);
this is just for demo purpose, you can actually create the remaining anchor and set all of their properties as shown above...
Update
As for changing the size, simply specify it in css as follows:
td{
width:250px;
height:250px;
}
Update
You can set the height and width of dynamically created elements as follows:
newCell.style.width ='250px';
newCell.style.height ='250px';
For displaying an image, instead of creating an <a>
simply create <img>
and set it's source and do your logic on it's click event.
Upvotes: 1