Question

以下代码仅在页面加载时表格已存在于文档中时才有效。但是我希望它适用于动态创建的表。可以这样做吗？

 var colNumber=22


for (var i=0; i<colNumber; i++)
{
  var thWidth=$("#tbl").find("th:eq("+i+")").width();
  var tdWidth=$("#tbl").find("td:eq("+i+")").width();      
  if (thWidth<tdWidth)                    
      $("#tbl").find("th:eq("+i+")").width(tdWidth);
  else
      $("#tbl").find("td:eq("+i+")").width(thWidth);           
}

该表格按以下方式创建：

    function loadFile(event){
    alasql('SELECT * FROM FILE(?,{headers:false})',[event],function(data){  
        var keys = [];
        for (var i = 0; i < data.length; i++) {
            for (var categoryid in data[i]) {
                var category = data[i][categoryid];
                keys.push(categoryid);
            }
        }

        keysConverted = keys.map(foo);
        var vMin = Math.min.apply(null, keysConverted);
        var vMax = Math.max.apply(null, keysConverted);
        var start = vMin-1 
        var ColNeeded = vMax - vMin+1;

        var arrExcel2Table = '<table id="tbl">';
        for (var i = 0; i < data.length; i++){
            arrExcel2Table = arrExcel2Table + '<tr>';
                for (var j = 0; j < ColNeeded; j++){
                    cellValue = data[i][number2Letter(j+start)];
                    if (typeof cellValue === "undefined"){
                        cellValue = '';
                    }
                    arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
                }
            arrExcel2Table = arrExcel2Table + '</tr>';  
        }
        arrExcel2Table = arrExcel2Table + '</table>';   
        document.getElementById('excel_table').innerHTML = arrExcel2Table;
    }); 
}

Answer 1

创建要运行的函数，并从动态元素添加事件。例如

arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';

可以替换为

arrExcel2Table = arrExcel2Table + '<td onclick="myFunction();">' + cellValue + '</td>';

以上代码将调用您创建的函数

myFunction() {
   alert();
}

Answer 2

只需创建表格，然后应用您想要的任何代码：

$('#excel_table').html(arrExcel2Table);
adjustWidth()

function adjustWidth(){

    var $tbl = $("#tbl"); // And cache your jQuery objects!! Massive performance boost

    for (var i=0; i<colNumber; i++)
    {
       var $th = $tbl.find("th:eq("+i+")"),
          $td = $tbl.find("td:eq("+i+")"),
          thWidth = $th.width(),
          tdWidth = $td.width();    

      if (thWidth<tdWidth)                    
          $th.width(tdWidth);
      else
          $td.width(thWidth);           
    }
}

如何将代码应用于动态创建的元素

2 个答案: