如何根据总数生成表tr

Question

i wrote the blow code to generate tr for my table based on a total count . 我写了一个打击代码，根据总计数为我的表生成tr。 there is a input type text that contains a number and i want to generatge tr for my table according to that number but it is not working . 有一个包含数字的输入类型文本，我想根据该数字为我的表生成tr但它不起作用。 here is my snippet : 这是我的片段：

 function findTotal(){ var table = $("#travells"); var rowNum = parseInt($("#total").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; };

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onload="findTotal()"> <input type="text" value="8" id="total"/> <table id="travells"> <thead> <tr class="travelcounting"> <th>name</th> <th>gender</th> <th>country</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="Name" readonly/></td> <td class="columns"><input type="text" id="gender" readonly/></td> <td class="columns"><input type="text" id="country" readonly/></td> </tr> </tbody> </table> </body>

Answer 1

 $( document ).ready(function() { var table = $("#travells"); var rowNum = parseInt($("#total").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; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type="hidden" value="8" id="total"/> <table id="travells"> <thead> <tr class="travelcounting"> <th>name</th> <th>gender</th> <th>country</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="Name" readonly/></td> <td class="columns"><input type="text" id="gender" readonly/></td> <td class="columns"><input type="text" id="country" readonly/></td> </tr> </tbody> </table>

Answer 2

When constructing these kind of strings, the new template literals from ES6 are a good fit. 构造这些字符串时，ES6中的新模板文字非常适合。 See here for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 有关详细信息，请参阅此处： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 function findTotal(){ var body = document.getElementsByTagName("tbody")[0]; var rowNum = parseInt(document.getElementById("total").value, 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>`; }; body.innerHTML = resultHtml; };

 <body onload="findTotal()"> <input type="text" value="8" id="total"/> <table id="travells"> <thead> <tr class="travelcounting"> <th>name</th> <th>gender</th> <th>country</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="Name" readonly/></td> <td class="columns"><input type="text" id="gender" readonly/></td> <td class="columns"><input type="text" id="country" readonly/></td> </tr> </tbody> </table> </body>

Answer 3

 $("#RowC").on("click",function(){ var TRCnt=$("tbody >tr").length; for(var i=TRCnt;i< (parseInt($("#RowNum").val())+TRCnt);i++){ let tr=$("<tr/>"); let inputName=$("<input/>",{type:"text",name:"name",placeholder:"name",value:i+1}); let inputGender=$("<input/>",{type:"text",name:"gender",placeholder:"gender"}); let inputCountry=$("<input/>",{type:"text",name:"country",placeholder:"country"}); tr.append($("<td/>").html(inputName)); tr.append($("<td/>").html(inputGender)); tr.append($("<td/>").html(inputCountry)); $("tbody").append(tr); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" id="RowNum" /> <input type="button" id="RowC" value="click" /> <hr> <table> <thead> <tr> <th>name</th> <th>gender</th> <th>country</th> </tr> </thead> <tbody> </tbody> </table>

Answer 4

This is the jquery code: 这是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; 
});

I wish you luck with implementation. 祝你好好实施。 :) :)

The Demo here: http://jsfiddle.net/fpd8dwtw/20/ 这里的演示： http ： //jsfiddle.net/fpd8dwtw/20/

如何根据总数生成表tr

问题描述

4 个解决方案

解决方案1
1 2017-09-10 07:47:33

解决方案2
1 2017-09-10 07:50:30

解决方案3
1 2017-09-10 08:03:09

解决方案4
0 2017-09-10 07:35:54

如何根据总数生成表tr

问题描述

4 个解决方案

解决方案1 1 2017-09-10 07:47:33

解决方案2 1 2017-09-10 07:50:30

解决方案3 1 2017-09-10 08:03:09

解决方案4 0 2017-09-10 07:35:54

解决方案1
1 2017-09-10 07:47:33

解决方案2
1 2017-09-10 07:50:30

解决方案3
1 2017-09-10 08:03:09

解决方案4
0 2017-09-10 07:35:54