Wie die <td> mit dynamischem Wert auf Schaltfläche Hinzufügen füllen

-2

Requirement klicken:Wie die <td> mit dynamischem Wert auf Schaltfläche Hinzufügen füllen

ich nach dem Klicken auf die Schaltfläche Hinzufügen den td Wert mit dynamischem Wert füllen will.

-Code

<script> 
    function addRow(in_tbl_name) 
    { 
     var tbody = document.getElementById(in_tbl_name); 
     var row = document.createElement("TR"); 
     var td1 = document.createElement("TD") 
     var strHtml1= "<Rule Id>"; 
     td1.innerHTML = strHtml1.replace(/!count!/g,count); 
     var td2 = document.createElement("TD") 
     var strHtml2 = "<Rule Name>7; 
     td2.innerHTML = strHtml2.replace(/!count!/g,count); 
     row.appendChild(td1); 
     row.appendChild(td2); 
</script> 

<td>Selected Plans 
    <br> 
    <table ID="in_tbl_name" border="1"> 
    <tr> 
     <td>Rule Id</td> 
     <td>Rule Name</td> 
    </tr> 
</table> 


<form action="/SubmitRule" method="post" model="command"> 
    <table> 
     <tr> 
      <td> 
       <select name="Select"><c:forEach items="${listRules}" var="rule"> 
        <option value="${rule.id}"> 
         <c:out value="${rule.id}" /> 
        </option> 
        </c:forEach> 
       </select> 
      </td>   
     <td> 
      <input type="submit" onClick="addRow('in_tbl_name')" 
      VALUE="AddRow"> 
     </tr> 
    </table> 
</form> 
</td>

ich für ein id den Wert immer bin aber nicht verstehen, wie in td diesen Wert zu setzen.

Quelle

2016-04-05 Rashid Reza

Sieht aus wie es eine Menge falsch mit Ihrem Code. Funktioniert das sogar, wenn Sie es versuchen? Sie fehlen schließende Klammern, Anführungszeichen und vielleicht mehr – putvande

Können Sie ausführbare Demo/Snippets oder [JSFiddle] (https://jsfiddle.net/) teilen? – Rayon

Sie fügen die Zeile nicht an das tbody-Element an. – neuhaus

hier ist der Code für die Zeile in der Tabelle hinzugefügt und auch die zuletzt hinzugefügten Zeile aus der Tabelle entfernen

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 

     <script> 
      var count=0; 
      function addRow(tableId) 
      { 
       count++; 
       var element1=document.getElementById(tableId); 
       var tr=document.createElement("tr"); 
       tr.id="row"+count; 

       var td1=document.createElement("td"); 
       var td2=document.createElement("td"); 
       var td3=document.createElement("td"); 

       td1.innerHTML="row"+count+" col 1"; 
       td2.innerHTML="row"+count+" col 2"; 
       td3.innerHTML="row"+count+" col 3"; 

       tr.appendChild(td1); 
       tr.appendChild(td2); 
       tr.appendChild(td3); 

       element1.appendChild(tr); 

       alert('row'+count); 
      } 
      function removeRow(tableId) 
      { 
       var element1=document.getElementById(tableId); 
       var row=document.getElementById('row'+count); 
       alert('row'+count); 
       element1.removeChild(row); 
       count--; 
      } 
     </script> 

    </head> 
    <body> 
     <h1>Hello World!</h1> 


     <a href="javascript:addRow('table')">Add Row</a><a href="javascript:removeRow('table')" >Remove</a> 
     <table id="table" border='1'> 


     </table> 

    </body> 
</html>

Quelle

2016-04-05 12:17:36

Tatsächlich enthält Ihr aktueller Code viele Javascript- und HTML-Probleme, Sie müssen mehr Javascript und HTML-Kurse sehen, bevor Sie hineintauchen.

Andernfalls müssen Sie Ihren Code und Ihre Art und Weise zu bearbeiten, um die Frage zu behandeln, um einige Probleme zu vermeiden, zum Beispiel:

in Ihrer JavaScript-Funktion, die Sie nicht brauchen, um die Tabelle zu übergeben ID als Parameter (was Sie bei HTML falsch machen), Sie können die ID einfach auf Javascript verwenden, ohne es zu übergeben, da Sie hier mit einer einzelnen Tabelle arbeiten.
Ihre Javascript-Funktion geschlossen ist nicht richtig, welche Fehler auf der Konsole (press F12 es zu sehen Feuer wird, sollte es richtig geschlossen werden und am Ende es Sie appendeing nicht die tbody zum table so die Linie wird nie hinzugefügt werden.
und Ihr HTML Code ist auch falsch, zum Beispiel in einem <td> Sie Ihren ganzen Code sind puuting, die nicht in jedem <table> oder <tr> ist, können Sie einfach ein <div> verwenden den ganzen Inhalt zu wickeln
In Ihrem Javascript-Code fehlen Ihnen einige Zitate ", und in Ihrem HTML-Code fehlen einige schließende Tags, die behoben werden sollten, und der erste <td> s für den Tabellenheader kann durch <th> Elemente ersetzt werden.

habe ich versucht, hier Ihren Code zu aktualisieren, um sie kohärenter zu machen:

<script> 
    function addRow() { 
     var table = document.getElementById('in_tbl_name'); 
     var row = document.createElement("TR"); 
     var td1 = document.createElement("TD") 
     var strHtml1 = "<Rule Id>"; 
     td1.innerHTML = strHtml1.replace(/!count!/g, "count"); 
     var td2 = document.createElement("TD") 
     var strHtml2 = "<Rule Name>"; 
     td2.innerHTML = strHtml2.replace(/!count!/g,count); 
     row.appendChild(td1); 
     row.appendChild(td2); 
     table.appendChild(row); 

    } 
</script> 

<div>Selected Plans 
    <br> 
    <table ID="in_tbl_name" border="1"> 
    <tr> 
     <td>Rule Id</td> 
     <td>Rule Name</td> 
    </tr> 
    </table> 


    <form action="/SubmitRule" method="post" model="command"> 
    <table> 
     <tr> 
     <td> 
      <select name="Select"> 
      <c:forEach items="${listRules}" var="rule"> 
       <option value="${rule.id}"> 
       <c:out value="${rule.id}" /> 
       </option> 
      </c:forEach> 
      </select> 
     </td> 
     <td> 
      <input type="submit" onClick="addRow()" VALUE="AddRow" /> 
     </td> 
     </tr> 
    </table> 
    </form> 
</div>

Und dann müssen Sie mehr auf der Logik des Codes konzentrieren und wie das Problem zu lösen von neue Zeilen hinzufügen

Quelle

2016-04-05 12:12:18

Wie die <td> mit dynamischem Wert auf Schaltfläche Hinzufügen füllen

Antwort

Verwandte Themen