表生成器Jquery

我正在尝试用html/CSS/jQuery制作一个动态表生成器；到目前为止我没有多少，但你能看一下并帮我吗

HTML

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



  });

});

$（文档）.ready（函数（）{
var col=$（'#coluna'）.val（）；
var row=$（'#fila'）.val（）；
var tabela=（“”+“”）；
var colunatabela=（“”）；
变量titulotabela=（“”）；
变量ceclulatabela=（“”）；
$（'.criar'）。单击（函数（）{
$（tabela）.appendTo（'#tabelas'）.then（function（）{
$（colunatabela）。附录（tabela）；
});
});
});

其思想是，用户输入他想要的列和行的数量，jQuery将添加到tabelas div a表中，然后从选项选择器的值中添加所述列和行。。。请帮忙

---

以下是该项目的示例。

这是创建表生成器的方法

演示 HTML: 替换

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

---

JavaScript:

$（文档）.ready（函数（）{
String.prototype.repeat=函数（n）{
返回新数组（n+1）。加入（this）；
}
$（'.criar'）。单击（函数（）{
$（'table'）.empty（）；
var col=parseInt（$（'#coluna'）.val（））；
var row=parseInt（$（'#fila'）.val（））；
var head=“Heading”。重复（行）；
var tableHead=”“+head+“”
var tableData=“Cookies”。重复（行）；
var tableRow=“”+tableData+”；
var table=tableRow；
$（'#tabelas'）。追加（表头）；
对于（i=0；i

这是创建表生成器的方法

演示 HTML: 替换

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

---

JavaScript:

$（文档）.ready（函数（）{
String.prototype.repeat=函数（n）{
返回新数组（n+1）。加入（this）；
}
$（'.criar'）。单击（函数（）{
$（'table'）.empty（）；
var col=parseInt（$（'#coluna'）.val（））；
var row=parseInt（$（'#fila'）.val（））；
var head=“Heading”。重复（行）；
var tableHead=”“+head+“”
var tableData=“Cookies”。重复（行）；
var tableRow=“”+tableData+”；
var table=tableRow；
$（'#tabelas'）。追加（表头）；
对于（i=0；i

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

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

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

$(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);
        }
    });
});