合計数に基づいてテーブルtrを生成する方法

合計カウントに基づいてテーブルのtrを生成するためのブローコードを書きました。数値が入っている入力タイプのテキストがあります。その数字に応じてテーブルのtrを生成したいのですが、が動作していません。ここは私の抜粋です。合計数に基づいてテーブルtrを生成する方法

function findTotal(){ 
 
    var table = $("#travells"); 
 
    var rowNum = parseInt($("#total").val(), 10); 
 
    var resultHtml = ''; 
 
    
 
\t for(var i = 0 ; i < rowNum ; i++) { 
 
\t resultHtml += ["<tr>", 
 
\t "<td>", 
 
\t (i+1), 
 
\t "</td>", 
 
\t '<td><input type="name" placeholder="text goes here..."></td>', 
 
\t '<td><input type="name" placeholder="text goes here..."></td>', 
 
\t '</tr>'].join("\n"); 
 
\t } 
 
\t 
 
\t 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>

出典

2017-09-10 inaz

正確に機能していませんか？間違ったログはありますか？ – nadavvadan

何がうまくいかない、コンソールでどのようなエラーが表示されますか？ – bhansa

@nadavvadan私のコードが動作していません。ここにエラーが表示されます。しかし私は私のPCにこのエラーがなく、エラーなしで動作していません。 – inaz

これは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/

出典

2017-09-10 07:35:54

私はロードされたボディ何かを提出する – inaz

しかし、オンロードボディの場合、関数は1つだけを実行し、行番号を編集することはできません。 –

このコードはonload本体で実行され、 'submit'の行番号を編集できます。 –

$(document).ready(function() { 
 
    var table = $("#travells"); 
 
    var rowNum = parseInt($("#total").val(), 10); 
 
    var resultHtml = ''; 
 
    
 
\t for(var i = 0 ; i < rowNum ; i++) { 
 
\t resultHtml += ["<tr>", 
 
\t "<td>", 
 
\t (i+1), 
 
\t "</td>", 
 
\t '<td><input type="name" placeholder="text goes here..."></td>', 
 
\t '<td><input type="name" placeholder="text goes here..."></td>', 
 
\t '</tr>'].join("\n"); 
 
\t } 
 
\t 
 
\t 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>

出典

2017-09-10 07:47:33 inaz

文字列のこれらの種類を構築し、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>

出典

2017-09-10 07:50:30 Thijs

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

出典

2017-09-10 08:03:09

合計数に基づいてテーブルtrを生成する方法

答えて

関連する問題