Question

我需要在汇总行之前将新行添加到表中。我能够在汇总行之前添加一个新行，但问题是某些单元格有文本字段元素，有些单元格是不可编辑的。如何创建一行考虑到这一点。请在下面找到在最后一行之前添加新行的代码。

<table id="sampTable">
      <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
          </tr>
      </thead>
      <tbody>
         <tr>
              <td><input type="text"/></td>
              <td><input type="text"/></td>
             <td><input type="text"/></td>
             <td></td>
             <td></td>
         </tr>
          <tr id="summaryRow">
              <td><input type="text"/></td>
              <td><input type="text"/></td>
             <td><input type="text"/></td>
             <td></td>
             <td></td>
         </tr>
      </tbody>
    </table>
    <br>

    <button id="AddBtn" onclick="addTableRow($('#sampTable'));">Add row</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 function addTableRow(jQtable){
        jQtable.each(function(){
            var $table = $(this);
            // Number of td's in the last table row
            var n = $('tr:last td', this).length;
            var tds = '<tr>';
            for(var i = 0; i < n; i++){
                tds += '<td><input type="text" class="tb-input"/></td>';
            }
            tds += '</tr>';
           if($('tbody', this).length > 0){
               // $('tbody', this).append(tds);
               $('tr:last',this).before(tds);
            }else {
                $(this).append(tds);
            }
        });
  }
</script>

上面的代码为所有列添加了一个文本字段元素。我不需要它，因为有些列包含文本字段，有些列不可编辑。

Answer 1

原因应该是IE8-对作为字符串添加的DOM进行了错误的同步。通常可以通过添加jQuery对象而不是字符串来解决。

所以在你的情况下

    var $tds = $('<tr>'); //this create a jQuery object
    /*   other code here   */
    $(this).append(tds); //this add the objet to the DOM

我做了一个fiddle以便说清楚。

在IE8中，使用Jquery在最后一行之前在HTML表中添加一个新行

1 个答案: