更多行和更多列jQuery

Question

我想要一个“添加行”和“添加列”按钮系统的东西。我的HTML是：

<table border="2" id="the_table"> 
    <tr> 
     <td><input name="value_1[]"/></td> 
    </tr> 
</table> 

<a href="#" rel="add_row">Add Row</a> <a href="#" rel="add_column">Add Column</a> 

我的jQuery：

$(document).ready(function(){ 
    var table_id = "#the_table"; 

    jQuery.fn.renderTable = function() { 
     var rowCount = $(table_id + ' tr').length; 
     var colCount = 0; 
     $(table_id + ' tr:nth-child(1) td').each(function() { 
      if ($(this).attr('colspan')) { 
       colCount += +$(this).attr('colspan'); 
      } else { 
       colCount++; 
      } 
     }); 

     if($(this[0]).attr("rel") == "add_row") { 
      var id = $(table_id + " input:last").attr("name"); 
      id = id.replace(/value_(\d+)/, function(match, number) { 
       return 'value_' + (parseInt(number, 10) + 1); 
      }); 
      var x = 0; 
      var result = "<tr>"; 
      while (x != colCount) { 
       result += '<td><input name="' + id + '" /></td>'; 
       x = x + 1; 
      } 
      result += "</tr>"; 
      $(table_id + ' tr:last').after(result); 
     } 
     if($(this[0]).attr("rel") == "add_column") { 

     } 
    }; 

    $('a').click(function(){ 
     $(this).renderTable(); 

     return false; 
    }); 
}); 

所以baiscally当我点击添加我希望它添加一行，但增量PHP $ _POST的字段名行...而通过添加列，它必须添加一列并向下递增名称。所以我的2×2表的输出将是：

<table border="2" id="the_table"> 
    <tr> 
     <td><input name="value_1[]"/></td> 
     <td><input name="value_1[]"/></td> 
    </tr> 
    <tr> 
     <td><input name="value_2[]"/></td> 
     <td><input name="value_2[]"/></td> 
    </tr> 
</table> 

有没有一种方法可以做到这一点？先谢谢你！！ ：d

Answer 1

基本上你需要添加一个新的td每个存在tr：

if ($(this[0]).attr("rel") == "add_column") { 
$(table_id + " tr").each(function() { 
    var $this = $(this), 
    newInput = $("<input/>", {name:$this.find('td:last input').attr("name")}), 
    newTD = $("<td/>").append(newInput); 

    $this.append(newTD); 
}); 
} 

看到这个工作Fiddle Example！