將列添加到輸入框表

我想製作一個動態表，以便可以將任何數量的行和列添加到表中。我成功地動態添加行，但是我在表中添加列時出現問題。爲了添加列，我希望用戶通過使用window.prompt來爲列提供columnName。當我單擊添加列時，它將向第二列添加列（沒有文本框），我想添加最靠近addcolumn按鈕的列（帶有文本框和列名稱）。將列添加到輸入框表

這裏是我的表

<table class="dynatable"> 
     <thead> 
      <tr> 
       <th><button class="add">Add</button></th> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Col 3</th> 
       <th>Col 4</th> 
       <th><button style="width: 100px; height: 25px" class="addColumn">Add Column</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="prototype"> 
       <td><button class="remove">Remove</button> 
       <td><input type="text" name="id[]" value="0" class="id" /></td> 
       <td><input type="text" name="name[]" value="" /></td> 
       <td><input type="text" name="col4[]" value="" /></td> 
       <td><input type="text" name="col3[]" value="" /></td> 
      </tr> 
    </table>

和我的JS是

/// <reference path="jquery-1.8.2.min.js" /> 
$(document).ready(function() { 
    var id = 0; 
    // Add button functionality 
    $("table.dynatable button.add").click(function() { 
     id++; 
     var master = $(this).parents("table.dynatable"); 
     // Get a new row based on the prototype row 
     var prot = master.find(".prototype").clone(); 
     prot.attr("class", "") 
     prot.find(".id").attr("value", id); 
     master.find("tbody").append(prot); 
    }); 

    // Remove button functionality 
    $("table.dynatable button.remove").live("click", function() { 
     $(this).parents("tr").remove(); 

    }); 

    $("table.dynatable button.addColumn").click(function() { 
     var columnName = window.prompt("Enter Column name", ""); 
     if (columnName) { 
      $('table').find('tr').each(function() { 
       $(this).find('td').eq(0).after('<td></td>'); 
       //$(this).closest('td').after('<td></td>'); 
      }); 
     } 
    }); 
});

現場演示jsfiddle

EDIT1：

列之前添加： Before Adding Column 添加列的表後應該是： After Adding Column

請參閱的jsfiddle用於演示

來源

2013-07-31 Bibek Gautam

到底是什麼這個問題？ –

@MattWilson問題被編輯.. –

嘗試

$(document).ready(function() { 
    var id = 0; 
    // Add button functionality 
    $("table.dynatable button.add").click(function() { 
     id++; 
     var master = $(this).closest("table.dynatable"); 
     // Get a new row based on the prototype row 
     var prot = master.find("tr.prototype").clone(); 
     prot.attr("class", "") 
     prot.find(".id").attr("value", id); 
     master.find("tbody").append(prot); 
    }); 

    // Remove button functionality 
    $("table.dynatable button.remove").live("click", function() { 
     $(this).parents("tr").remove(); 

    }); 

    $("table.dynatable button.addColumn").click(function() { 
     var $this = $(this), $table = $this.closest('table') 
     var columnName = window.prompt("Enter Column name", ""); 

     $('<th>' + columnName +'</th>').insertBefore($table.find('tr').first().find('th:last')) 

     var idx = $(this).closest('td').index() + 1; 
     $('<td><input type="text" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last')) 
    }); 
});

演示：Fiddle

來源

2013-07-31 06:11:32

$("table.dynatable button.addColumn").click(function() { 
    var columnName = window.prompt("Enter Column name", ""); 
    $('table').find('th').last().before('<th>'+columnName+'</th>');/*Add this line*/ 
    $('table').find('tr').each(function() { 
     $(this).find('td').eq(0).after('<td></td>'); 
    });

工作小提琴：Fiddle

來源

2013-07-31 06:14:23 L10

將列添加到輸入框表

回答

相關問題