js Code Konsolidierung

[BastiBln]

Moin,

ich brauch mal Euren Rat. Ich generiere mit php eine Liste aus einer DB. In jeder Zeile sind js-Funktionen eingebettet. Wie Ihr im Code sehen könnt, muss ich die Funktionen und Variablen interieren damit sie je Zeile funktionieren.

Es funktioniert alles, aber geht das auch irgendwie hübscher? Das ich die Funktionen nur 1x unter der Schleife aufführe und es trotzdem je Zeile mit den richtigen Variablenwerten funktioniert?

Vielen Dank!

PHP-Code:

<table id="mySEARCH" class="shoppinglist-content">
<!-- ************************************************************************ shopping list beginn-->
<!-- script test start -->
<?php
if(isset($_COOKIE['shoppinglist'])){
  $list = $_COOKIE['shoppinglist'];
  $stmt = $pdo->prepare("SELECT * FROM `$list`");
  $stmt->execute();
  $x = 0;
  foreach($stmt as $item)
  { $x++;?>
    <tr id="line<?php echo $x;?>" style="opacity: 1.0;">
    <td><button id="activ<?php echo $x;?>" class="btn-hide-row" name='activ' onclick="hiddenLine<?php    echo $x;?>();" value="true"><img class="list-icon" id="visibility<?php echo $x;?>" src="images/icon-invisible.png" /></button></td>
     <form action='calculate.php' method='post'>
     <td class="pcs-unit-list"><?php echo $item['pieces']." ".$item['unit']?></td>
     <td name='item' class="shop-list-item" id="item"><?php echo $item['item']?></td>
     <td class="brand-list"><input type='text' id="brand<?php echo $x;?>" class="brand-list" name='brand' value="<?php echo $item['brand']?>" onkeyup="editSave<?php echo $x;?>(), success()"></td>
     <td class="kind-list"><select class="shoppinglist-kind" name='item-kind' id="item-kind<?php echo $x;?>" onchange="editSave<?php echo $x;?>(), success()">
       <option value=""></option>
       <option value="Gemüse" <?php if($item['kind'] == "Gemüse") echo "selected"?>>Gemüse</option>
       <option value="Obst" <?php if($item['kind'] == "Obst") echo "selected"?>>Obst</option>
       <option value="Fleisch" <?php if($item['kind'] == "Fleisch") echo "selected"?>>Fleisch</option>
       <option value="Fisch" <?php if($item['kind'] == "Fisch") echo "selected"?>>Fisch</option>
       <option value="Getreideprod." <?php if($item['kind'] == "Getreideprod.") echo "selected"?>>Getreideprod.</option>
       <option value="Milchprod." <?php if($item['kind'] == "Milchprod.") echo "selected"?>>Milchprod.</option>
       <option value="Gewürze" <?php if($item['kind'] == "Gewürze") echo "selected"?>>Gewürze</option>
       <option value="Knabbern" <?php if($item['kind'] == "Knabbern") echo "selected"?>>Knabbern</option>
       <option value="Getränke" <?php if($item['kind'] == "Getränke") echo "selected"?>>Getränke</option>
       <option value="Kräuter" <?php if($item['kind'] == "Kräuter") echo "selected"?>>Kräuter</option>
       <option value='Hygiene' <?php if($item['kind'] == "Hygiene") echo "selected"?>>Hygiene</option>
       <option value='Putzen' <?php if($item['kind'] == "Putzen") echo "selected"?>>Putzen</option>
       <option value='Haustier' <?php if($item['kind'] == "Haustier") echo "selected"?>>Haustiere</option>
       <option value='Sonstiges' <?php if($item['kind'] == "Sonstiges") echo "selected"?>>Sonstiges</option>
      </select></td>
      <td class="list-button"><button class='btn-list' name='delete' id="btn-locked-<?php echo $x;?>" value="<?php echo $item['id']?>"><img src='images/trashbox.png'></button></td></form></tr>
      <script>
       function editSave<?php echo $x;?>(){
         var id = <?php echo $item['id']?>;
         var brand = $("#brand<?php echo $x;?>").val();
         var itemKind = $("#item-kind<?php echo $x;?>").val();
         $.post("calculate.php", { save: id, brand: brand, itemkind: itemKind },
         function(data) {
           $('#edit-confirm').html(data);
         });
         }
                                function hiddenLine<?php echo $x;?>() {
                                    var line = document.getElementById("line<?php echo $x;?>");
                                    var activ = document.getElementById("activ<?php echo $x;?>");
                                    var brand = document.getElementById("brand<?php echo $x;?>");
                                    var itemKind = document.getElementById("item-kind<?php echo $x;?>");
                                    var btnLocked = document.getElementById("btn-locked-<?php echo $x;?>");
                                    var btnImage = document.getElementById("visibility<?php echo $x;?>");
                                    if(activ.value == "true"){
                                        activ.value = "false";
                                    }else{
                                        activ.value = "true";
                                    }
                                    if(activ.value == "false"){
                                        line.style.opacity = "0.1";
                                        brand.setAttribute("readonly", "");
                                        itemKind.setAttribute("disabled", "");
                                        btnLocked.setAttribute("disabled", "");
                                        btnImage.setAttribute("src", "images/icon-visible.png");
                                        //createCookie('hide-line-<?php echo $x;?>','false');
                                    }
                                    if(activ.value == "true") {
                                        line.style.opacity = "1.0";
                                        brand.removeAttribute("readonly", "");
                                        itemKind.removeAttribute("disabled", "");
                                        btnLocked.removeAttribute("disabled", "");
                                        btnImage.setAttribute("src", "images/icon-invisible.png");
                                        //createCookie('hide-line-<?php echo $x;?>','true');
                                    }
                                }
                            </script>
                        <?php
                        }
                    }else {
                                                /******************************************************************************** shopping list end****/
                        ?><tr><td></td><td></td><td>Keine Items vorhanden</td><td></td><td></td><td></td><td></td></tr><?php
                    }
                ?>
            <!-- script test end -->
            </table>