Übergabe von Variablen über PHP in Javascript während einer Schleife, die Informationen aus einer Datenbank

Question

Innerhalb dieses Abschnitts des Codes verwende ich PHP, um Informationen aus einer MySQL-Datenbank zu ziehen. Es ist in einer Schleife, so dass alle Zeilen in der Datenbank auf der Seite angezeigt werden. Es gibt einen Preis in jeder Reihe, und ich summiere diese (in der Schleife) und zeige sie als eine Summe an. Ich möchte Funktionalität hinzufügen, die ein Kontrollkästchen ermöglicht, das überprüft werden muss, damit der Preis zur Gesamtsumme addiert wird, aber ich kann nicht herausfinden, wo und mit welcher Technologie ich das verwenden sollte. Hier

ist der Code-Snippet:

$sql = "SELECT CourseNum, CourseName, CreditNum, InstructorName, BookName, NewPrice, UsedPrice, Section_Name, BookLink FROM BookInfo"; //  echo"<a href='$row["BookLink"].'>$row["BookName"].</a>"; 
$test = "test"; 
$result = $conn->query($sql); 

echo"<h2>CIT Course requirements <hr></h2>"; 
echo"<h2><small>Math & Science</small></h2>"; 
if ($result->num_rows > 0) { 
    echo "$tableHeaderInfo"; 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     if($row["Section_Name"] == mth_sci){  

       echo "<tr><td class='col-xs-.3'><input type='checkbox' ID='checbox123' name='checkbox123' value='1' onClick='apply(this);' /> </td><td class='col-xs-1'>" . $row["CourseNum"]. "</td><td class='col-xs-3'>" . $row["CourseName"]. " </td><td class='col-xs-2'>" . $row["InstructorName"]." </td><td><a href='" . $row["BookLink"] . "'>" . $row["BookName"] . "</a></td><td class='col-xs-1'>$" . money_format('%(#10n', $row["NewPrice"]). " </td><td class='col-xs-1'>$" . money_format('%(#10n', $row["UsedPrice"]). " </td></tr>"; 

       $test = "test"; 

       echo " 

         <script> 

         apply = function (obj) 
         { 
          if(obj.checked){ 
           obj.parentNode.parentNode.style.backgroundColor='lightgreen' 


          } 
          else 
          obj.parentNode.parentNode.style.backgroundColor='' 
         } 
         </script>      

       "; 

       $sum_total1 += $row["NewPrice"]; //This totals the prices right now 
       $sum_total2 += $row["UsedPrice"]; 



     } 
    } 
    echo "</table>"; 
} else { 
    echo "0 results"; 
} 

So statt $ sum_total2 + = $ row [ "UsedPrice"]; Um den Preis zu summieren, wird es eine ähnliche Zeile in der JavaScript-Funktion "apply" geben.

Scheint dies ein guter Weg, um die Zahlen zusammenzufassen? Wie bekomme ich diese Ergänzung von innerhalb der Schleife, damit ich die Preisvariablen ziehen kann?

Danke für die Hilfe :) Ich kann die ganze Seite des Codes bei Bedarf veröffentlichen.

Edit:

ich mein Hauptziel ist es, die Preise zu verwenden, um insgesamt, während innerhalb der Schleife, aber nur, wenn das Kontrollkästchen aktiviert ist.

zum Beispiel

      if(obj.checked){ 
          obj.parentNode.parentNode.style.backgroundColor='lightgreen' 

          //does the total here ie total += $NewPrice 
         } 

Aber kann kippe es so funktionieren, da die Schleife bereits durch die Zeit der Checkbutton Ereignis geschieht ..

bearbeiten 3 beendet hat:

Der Code-Snippet ist im Grunde das Bild unten angezeigt (minus einige bootstrap)

Example image

http://pastie.org/10790551 (Link zum Code aus obigem Bild)

Wenn das Kontrollkästchen gedrückt wird, wird die Summe aktualisiert. Es scheint, dass meine Technik dafür nicht funktioniert, da ich die Buchpreisvariablen innerhalb der Schleife abfangen muss.

Answer 1

Ich bin mir nicht ganz sicher, ob ich verstehe, was du willst, aber warum lässt du Javascript nicht summieren, wenn du die Checkbox trotzdem mit Javascript anklickst? Sie könnten den Preis der Zeile in das Ankreuzfeld-Element aufnehmen. Entweder als ein Tag oder als eine Variable, die übergeben wird ...

Dann addieren/subtrahieren Sie es von der Summe (Ich vermute, das ist immer in einem bestimmten Element). Oder Sie könnten das Javascript durch alle Checkbox-Elemente schleifen lassen, um den Preis von einem Tag zu holen, wenn es aktiviert ist und die Summe anzeigen.

---

Antwort aktualisieren:

Okay, so sehen Sie Ihre Kontrollkästchen wie folgt aus:

<input type='checkbox' ID='checbox123' name='checkbox123' value='1' onClick='apply(this);' /> 

Zunächst einmal sollten Sie nicht die gleiche ID für mehr als ein Element verwendet werden. Wenn Sie ihm eine ID geben müssen, sollte es eher "Checkbox" + [einige eindeutige ID] sein. Wenn es für CSS ist, verwenden Sie die Klasse. Der Name auf der anderen Seite, können Sie nutzen, wenn es das gleiche für alle von ihnen (und vorausgesetzt, Sie mit HTML5 nicht), weil, dass Sie dies tun können:

var checkboxes = document.getElementsByName("checkbox123"); 

Kontrollkästchen ist jetzt eine Sammlung von allen Kontrollkästchen namens checkbox123, und Sie können durch sie durchlaufen :)

---

Antwort auf neue Update:

eine Möglichkeit, dies zu lösen, ist, dass Sie Ihre Summen setzen in hTML stellen Sie sicher, Elemente mit ID-Tags. Dann stellen Sie sicher, dass Sie Ihre Checkboxen die Preisinformationen wie folgt geben: (Btw, ich entfernte das ID-Tag, wie Sie wirklich, sollte nicht die gleiche ID für mehrere Elemente wiederverwenden. Und was verwenden Sie Wert für?)

<input type='checkbox' style='width:40px; height:40px;' name='checkbox123' value='1' price1='" . [insert new price here] . "' price2=' . [insert used price here] . ' onClick='apply(this);' /> 

und dann anwenden-Funktion wie folgt aussehen könnte: (! auch nicht Semikolons in Javascript vergessen)

apply = function (obj) 
{ 
    if(obj.checked){ 
     obj.parentNode.parentNode.style.backgroundColor='#99ff99'; 
    } 
    else { 
     obj.parentNode.parentNode.style.backgroundColor=''; //what is this for?? 
    } 

    var checkboxes = document.getElementsByName("checkbox123"); 
    var price1sum = 0; 
    var price2sum = 0; 
    for (var i=0; i<checkboxes.length; i++) { 
     if (checkboxes[i].checked) { 
      price1sum += checkboxes[i].getAttribute("price1"); 
      price2sum += checkboxes[i].getAttribute("price2"); 
     } 
    } 
    /* 
    display price1sum and price2sum in html elements using something like this: 
    document.getElementById("ID for total of new price").innerText = price1sum; 
    */ 
} 

Offensichtlich eine Schleife für jede einzelne Checkbox-Klick tun, ist nicht die effektivste Lösung, aber angesichts Ihrer derzeitigen Struktur halte ich das für am einfachsten, und wenn Sie nicht viele Zeilen haben, werden Sie nichts merken ng.