Question

我写了一个打击代码，根据总计数为我的表生成tr。有一个包含数字的输入类型文本，我想根据该数字为我的表生成tr 但它不起作用。这是我的片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

祝你好好实施。：）

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

Answer 2

$( 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 3

构造这些字符串时，ES6的新模板文字非常适合。有关详细信息，请参阅此处：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 4

$("#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>

如何根据总数生成表tr

4 个答案: