Wie kann ich das füllen einer Tabelle die Zelle durch JavaScript-code?

Ich habe eine Tabelle wie unten. Ich habe zum füllen der "Menge" - Feld mit der "Kaufen-Menge" und "Markt-Preis" - Feld. Betrag = Kaufen Menge*Preis. Ich Tue etwas -

<script>
function populate() {
var rows = document.getElementById("mytable").getElementsByTagName("tr");
for ( var i = 1; i <= rows.length; i++) {
    cells = rows[i].getElementsByTagName("td");
    for ( var j = 0; j <= cells.length; j++) {
        if (j == 1) {
            var num1 =parseFloat(cells[1].childNodes[0].value);
            var num2 =parseFloat(cells[2].childNodes[0].data);
            var num3=num1 * num2;
            cells[3].childNodes[0].value = num3.toString();
        }
     }
   }
 }
</script>

Bekomme ich die Werte für column1 und column2, aber der Wert in der letzten Spalte wird nicht immer aufgefüllt. Die Letzte Zeile scheint nicht zu funktionieren.

cells[3].childNodes[0].value = num3.toString();

Was sollte ich ändern?

Wie kann ich das füllen einer Tabelle die Zelle durch JavaScript-code?

Den untenstehenden html-code ist Teil meiner .jsp-Datei.

 <form action="BuyServlet">
    <table border="1" cellpadding="5" id="mytable">
        <tr>
            <th>Stock Name</th>
            <th>Buy Quantity</th>
            <th>Market Price</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity" onblur="populate()"></td>
            <td>122</td>
            <td><input type="text" name="amount">
            </d>
        </tr>
        <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity" onblur="populate()"></td>
            <td>111</td>
            <td><input type="text" name="amount"></td>
        </tr>
    </table>
</form>
  • Sie haben ein paar HTML-gehen mit JavaScript?
  • Sind Sie sicher, dass cells[2].childNodes[0].data funktioniert?
  • Können Sie erstellen ein jsFiddle?
  • Immer besser, anzeigen-code als ein Bild.
  • Es gibt auch keinen Grund, um eine Schleife durch die Zellen!
InformationsquelleAutor Nihal Sharma | 2012-09-25
  1. 1

    Dein code ist verbesserungswürdig. In Ihrer Tabelle haben, sollten Sie ein thead und tbody Abschnitte. Das macht es leichter zugänglich und einfacher zu ingore die überschrift.

    <table border="1" cellpadding="5" id="mytable">
        <thead>
          <tr>
            <th>Stock Name</th>
            <th>Buy Quantity</th>
            <th>Market Price</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity"></td>
            <td>122</td>
            <td><input type="text" name="amount"></td>
          </tr>
          <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity"></td>
            <td>111</td>
            <td><input type="text" name="amount"></td>
          </tr>
        </tbody>
    </table>
</form>

    Nun mit dem code, sollten Sie das hinzufügen des onblur-code nicht hardcoded. Sie Durchlaufen die Zellen sind, gibt es keinen Grund. Auch gibt es keine Notwendigkeit, um eine Schleife jede Zeile, wenn die Tabelle geändert wird. Berechnen Sie einfach die, die sich geändert! Mit childNodes können tückisch sein, weil der whitespace-Unterschiede in den Browsern. Führen Sie den folgenden code nach der Tabelle wiedergegeben wurde.

    (function () {

    var table = document.getElementById("mytable");
    var tbody = table.getElementsByTagName("tbody")[0];
    var rows = tbody.getElementsByTagName("tr");​​​​​​​​​

    function populateRow (index, addBlurEvent) {
        var row = rows[index];
        var cells = row.getElementsByTagName("td")
        var textboxes = row.getElementsByTagName("input");

        var amountTextbox = textboxes[0];
        var totalTextbox = textboxes[1];
        var costCell = cells[2];

        var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0;
        var cost = parseFloat(costCell.innerHTML);
        var total = amount * cost;
        totalTextbox.value = total;

        if (addBlurEvent) {
            amountTextbox.onblur = function () { populateRow(index, false); };
        }

    }

    for (i=0;i<rows.length;i++) {
        populateRow(i, true);    
    }

}());

    Den läuft fiddle der obige code

    • Ihre Lösung scheint groß, aber ein Problem, ich bin vor. Wenn ich kopiert die codes aus fiddle, die html nicht produzieren das gleiche Ergebnis. Der Betrag wird nicht immer aktualisiert. Aber in der Geige seine Werke gut. Ist es etwas, was ich bin fehlt?
    • Habt Ihr die Tabelle haben thead und tbody? Hat die Seite irgendwelche Fehler enthalten? Sie nannte es "onload" oder nach der Tabelle gerendert wird?
    • Ja, meine Tabelle hat nun thead und tbody. Keine Fehler. Ruft es nach der Tabelle wiedergegeben wird. Funktioniert immer noch nicht. Kann ich den gesamten code mit, die Sie irgendwo, so dass Sie könnten einen Blick nehmen?
    InformationsquelleAutor epascarello
  2. 2

    Im Grunde sind Sie immer den Wert aus dem Textfeld (besten Menge) und Sie verwenden die Daten, um den Wert der Marktpreis(besser verwenden innerText)

    versuchen, diese (Ersetzen mit deinem code innerhalb der Schleife)

    var num1 =parseFloat(cells[1].childNodes[0].value);
var num2 =parseFloat(cells[2].innerText);
var num3=num1 * num2;
cells[3].innerText = num3.toString();
    InformationsquelleAutor Sudhakar B
  3. 0

    Ich denke, der Fehler ist aufgrund von Fehler Rechtschreibung - Sie haben childnodes statt childNodes auf "Zellen[3].childnodes[0].Wert = num3.toString();"

    Check this fiddle - http://jsfiddle.net/VwU7C/

    • Äh, "chileNodes"?
    • Ich habe es mit childNode zu, aber es funktioniert nicht auf diese Weise. Sudhakar Lösung funktioniert Prima.
    • oops... bearbeitet werden 🙂
    • es scheint zu arbeiten, in der Geige...
    InformationsquelleAutor bhb
Schreibe einen Kommentar