Javascript 如何根据输入的行数生成html表？

我必须使用jquery创建一个表。表格中的行数将由输入框确定。列数是已知的。提交后，将生成一个表。试着做一把小提琴。 我对jquery非常陌生。我不知道怎么继续

您可以使用jQuery的append

var count = 30;
var row = "<tr><td>1</td><td>2</td><td>3</td></tr>";
for(var i=0; i< count; i++){
    $('#tableId tbody').append(row);
}

<table id="tableId"></table>

您可以使用jQuery的append

var count = 30;
var row = "<tr><td>1</td><td>2</td><td>3</td></tr>";
for(var i=0; i< count; i++){
    $('#tableId tbody').append(row);
}

<table id="tableId"></table>

---

我为你做了一把小提琴。看一看

---

我为你做了一把小提琴。看一看

---

这是你的小提琴：

这是jquery代码：

 $("#submitButton").click(function() {
    var table = $("#resultTable");
    var rowNum = parseInt($("#table-row-num").val(), 10);
    var resultHtml = '';

    for(var i = 0 ; i < rowNum ; i++) {
        resultHtml += ["<tr>", 
     "<td>", 
      (i+1),
     "</td>",
     '<td><input type="name" placeholder="text goes here..."></td>',
     '<td><input type="name" placeholder="text goes here..."></td>',
     '</tr>'].join("\n");
    }  

    table.html(resultHtml);
    return false; 
});

我祝你执行顺利

编辑： 如果希望允许行数在最小和最大行数之间，最好的解决方案是使用本机HTML5验证。 这是JSFIDLE：

---

这是你的小提琴：

这是jquery代码：

 $("#submitButton").click(function() {
    var table = $("#resultTable");
    var rowNum = parseInt($("#table-row-num").val(), 10);
    var resultHtml = '';

    for(var i = 0 ; i < rowNum ; i++) {
        resultHtml += ["<tr>", 
     "<td>", 
      (i+1),
     "</td>",
     '<td><input type="name" placeholder="text goes here..."></td>',
     '<td><input type="name" placeholder="text goes here..."></td>',
     '</tr>'].join("\n");
    }  

    table.html(resultHtml);
    return false; 
});

我祝你执行顺利

编辑： 如果希望允许行数在最小和最大行数之间，最好的解决方案是使用本机HTML5验证。 这是JSFIDLE：

---

假设您为元素提供了一个id

您的纯Javascript应该如下所示：

function addRows() {
    var table = document.getElementById('tableElement');
    var rows = parseInt(document.getElementById('table-row-num').value);
    for (var i = 1; i <= rows; i++) {
        var tr = document.createElement('tr');
        var cell1 = document.createElement('td');
        var cell2 = document.createElement('td');
        var cell3 = document.createElement('td');
        var input1 = document.createElement('input');
        var input2 = document.createElement('input');
        input1.type = "text";
        input2.type = "text";
        input1.placeholder = "Text goes here...";
        input2.placeholder = "Text goes here...";
        cell1.innerHTML = i.toString();
        cell2.appendChild(input1);
        cell3.appendChild(input2);
        tr.appendChild(cell1);
        tr.appendChild(cell2);
        tr.appendChild(cell3);
        table.appendChild(tr);
    }
}

---

现在我确信jquery代码会小得多，但是相信我，您的浏览器对纯Javascript的响应会快得多。

假设您为元素提供了一个id

您的纯Javascript应该如下所示：

function addRows() {
    var table = document.getElementById('tableElement');
    var rows = parseInt(document.getElementById('table-row-num').value);
    for (var i = 1; i <= rows; i++) {
        var tr = document.createElement('tr');
        var cell1 = document.createElement('td');
        var cell2 = document.createElement('td');
        var cell3 = document.createElement('td');
        var input1 = document.createElement('input');
        var input2 = document.createElement('input');
        input1.type = "text";
        input2.type = "text";
        input1.placeholder = "Text goes here...";
        input2.placeholder = "Text goes here...";
        cell1.innerHTML = i.toString();
        cell2.appendChild(input1);
        cell3.appendChild(input2);
        tr.appendChild(cell1);
        tr.appendChild(cell2);
        tr.appendChild(cell3);
        table.appendChild(tr);
    }
}

现在我确信jquery代码会小得多，但是相信我，你的浏览器对纯Javascript的响应会快得多

})

---

})

你需要展示你解决问题的尝试，这样人们就可以帮助你解决问题。像这样的事情用胡子很容易。你需要展示你解决问题的尝试，这样人们就可以帮助你解决问题。像这样的事情用胡子很容易谢谢乔治。如果我想限制行数？假设最多10行？我尝试过，但在提交后出现了一些错误，我编辑了答案。这里有到第二个JSFIDLE的链接。非常感谢。现在这个很好用！谢谢你，乔治。如果我想限制行数？假设最多10行？我尝试过，但在提交后出现了一些错误，我编辑了答案。这里有到第二个JSFIDLE的链接。非常感谢。现在这个很好用！非常感谢你的帮助非常感谢你的帮助

function addRows() {
    var table = document.getElementById('tableElement');
    var rows = parseInt(document.getElementById('table-row-num').value);
    for (var i = 1; i <= rows; i++) {
        var tr = document.createElement('tr');
        var cell1 = document.createElement('td');
        var cell2 = document.createElement('td');
        var cell3 = document.createElement('td');
        var input1 = document.createElement('input');
        var input2 = document.createElement('input');
        input1.type = "text";
        input2.type = "text";
        input1.placeholder = "Text goes here...";
        input2.placeholder = "Text goes here...";
        cell1.innerHTML = i.toString();
        cell2.appendChild(input1);
        cell3.appendChild(input2);
        tr.appendChild(cell1);
        tr.appendChild(cell2);
        tr.appendChild(cell3);
        table.appendChild(tr);
    }
}

$("#createTable").on("click", function (event){
event.preventDefault();
var noOfRows = $("#table-row-num").val();
var noOfCols = 3;  // fixed columns as you mentioned in the question
var fragment = document.createDocumentFragment();
var oTable = document.createElement("table");
for(var i =0; i < noOfRows; i++){
    var oTr = document.createElement("tr");
    for(var j=0; j < noOfCols; j++){
        var oTd = document.createElement("td");
        oTd.innerHTML = "put your content here";
        oTr.appendChild(oTd);
    }
    oTable.appendChild(oTr);
}

$("#table-gen").html(oTable);