表生成器Jquery

Question

我正在尝试用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。

Answer 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);
        }
    });
});