CODEWITHSUNDEEP
javascripthtml
user3692021
user3692021

Reputation: 53

increase width and height of table cells

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/>&nbsp;&nbsp; <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

Answers (1)

T J
T J

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

JSFiddle

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

JSFiddle

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.

JSFiddle

Upvotes: 1

Related Questions