Wie zu generieren Tabelle tr basierend auf einer Gesamtzahl

Ich schrieb den Schlag-Code, um tr für meine Tabelle basierend auf einer Gesamtzahl zu generieren. Es gibt einen Eingabe-Typ Text, der eine Zahl enthält, und ich möchte tr für meine Tabelle nach dieser Nummer erzeugen, aber es funktioniert nicht. hier ist mein Code-Schnipsel:Wie zu generieren Tabelle tr basierend auf einer Gesamtzahl

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>

Quelle

2017-09-10 inaz

Was genau funktioniert nicht? Gibt es fehlerhafte Protokolle? – nadavvadan

Was funktioniert nicht, welche Fehler sehen Sie in der Konsole? – bhansa

@nadavvadan mein Code funktioniert nicht. und zeigt hier Fehler. aber ich habe diesen Fehler nicht in meinem PC und es funktioniert einfach nicht ohne Fehler – inaz

Dies ist der jQuery-Code:

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

Ich wünsche Ihnen viel Glück bei der Umsetzung. :)

Die Demo hier: http://jsfiddle.net/fpd8dwtw/20/

Quelle

2017-09-10 07:35:54

Ich möchte meinen Code auf Körper geladen nicht ausführen alles einreichen – inaz

, aber wenn onload body die Funktion nur einen ausführen und kann nicht die Zeile Nummer bearbeiten, was genau wollen Sie –

diesen Code auf onload Körper ausführen und Sie können die Zeilennummer von 'submit' bearbeiten –

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

Quelle

2017-09-10 07:47:33 inaz

Wenn diese Art von Saiten Konstruktion, die neue Vorlage Literale aus ES6 ist eine gute Passform. Sehen Sie hier für weitere Informationen: 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>

Quelle

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>

Quelle

2017-09-10 08:03:09

Wie zu generieren Tabelle tr basierend auf einer Gesamtzahl

Antwort

Verwandte Themen