Question

我已经使用javascript动态创建了表，想要添加一个＆＃34; href＆＃34;当动态创建表格时，将图像链接到表格单元格，并增加表格单元格的宽度和高度。请参阅＆＃34; http://jsfiddle.net/c3X8Y/1/＆＃34;。在＆＃34;行动＆＃34;表格的列我想显示href链接，并希望增加表格单元格的宽度和高度。下面是代码。 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>

Answer 1

您可以在以下代码中创建textNode，而不是创建html元素：

 // 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';

要显示图片，而不是创建<a>，只需创建<img>并设置其来源，并在其点击事件上执行您的逻辑。

JSFiddle

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

1 个答案: