增加表格单元格的宽度和高度

increase width and height of table cells

本文关键字：高度 表格 单元格 增加      更新时间：2023-09-26

我已经使用javascript动态创建了表格，想要添加一个"href"链接，当表格动态创建时，图像到表格单元格，并增加表格单元格的宽度和高度。请参阅"http://jsfiddle.net/c3X8Y/1/"。在"动作"列的表，我想显示的链接，并希望增加的宽度和高度的表单元格。下面是代码。HTML代码:

<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代码:

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

不是创建一个html元素，而是在下面的代码中创建一个textNode:

 // Append a text node to the cell
  var newText2  = document.createTextNode('<a href="">delete</a>' +'<a href="">show</a>');
  newCell2.appendChild(newText2);
相反，实际上必须使用createElement()函数创建html元素，如下所示: 
 // 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

这只是为了演示，你可以创建剩下的锚并设置它们的所有属性，如上面所示…

至于改变大小，只需在css中指定如下:

td{
 width:250px;
 height:250px;
}

JSFiddle

你可以设置动态创建元素的高度和宽度，如下所示:

newCell.style.width ='250px';
newCell.style.height ='250px';

要显示图像，只需创建<img>并设置其源并对其单击事件执行逻辑，而不是创建<a>。

JSFiddle

相关文章：