表生成器 Jquery答案

【问题标题】：Table generator Jquery表生成器 Jquery
【发布时间】：2014-11-01 04:16:36
【问题描述】：

我正在尝试使用 html/CSS/jQuery 制作动态表格生成器；到目前为止我没有太多，但你能帮我看看吗？

HTML

<span id="cols">Columns:</span>

<select id="coluna">
    <option disabled selected>Select</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<span class="ros">Rows:</span>

<select id="fila">
    <option disabled selected>Select</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<button class="criar">Generate</button>
<div id="tabelas"></div>

CSS

body{
  background:oldlace;
  font-family: "Eurostile LT Std";
}

select{
  margin-right:40px;
}

jQuery

$(document).ready(function(){

  var col = $('#coluna').val();
  var row = $('#fila').val();
  var tabela = ("<table>" + "</table>");
  var colunatabela = ("<tr></tr>");
  var titulotabela = ("<th></th>");
  var ceclulatabela = ("<td></td>");


  $('.criar').click(function(){  

    $(tabela).appendTo('#tabelas').then(function(){
      $(colunatabela).appendTo(tabela);
    });



  });

});

这个想法是，这个人输入他想要多少列和行，jQuery 将添加到 tabelas div 一个表，然后从选项选择器的值中添加所述列和行。 . 请帮忙？

这是项目的PEN。

【问题讨论】：

标签： jquery html input dynamic html-table

【解决方案1】：

这是创建表格生成器的方法。

Fiddle 上的演示

HTML：

替换

<div id="tabelas"></div>

与

<table id="tabelas"></table>

CSS：

td, th, table {
    border:  solid 1px;
    border-collapse: collapse;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

JavaScript：

$(document).ready(function () {

    String.prototype.repeat = function(n) {
        return new Array(n + 1).join(this); 
    }

    $('.criar').click(function () {
        $('table').empty();
        var col = parseInt($('#coluna').val());
        var row = parseInt($('#fila').val());
        var head = "<th>Heading</th>".repeat(row);
        var tableHead = "<tr>" + head + "</tr>"
        var tableData = "<td>Cookies</td>".repeat(row);
        var tableRow = "<tr>" + tableData + "</tr>";
        var table = tableRow;

        $('#tabelas').append(tableHead);

        for (i = 0; i < col; i++) {
            $('#tabelas tr:last').after(table);
        }
    });
});

【讨论】：