Question

は、製品のリストを使用して印刷されているjQueryのテーブルのループ

while($rr = $retval->fetch_object()) { 
    $summery_return .= '<div class="w3-blue w3-card-4" style="font-size:18px;">'; 
    $summery_return .= '<span style="color:white;padding:2px;font-weight:bold" id="itmslct" data-proname='.$rr->product.'>'.$rr->product.'<span style="float:right;margin-right:19px;">'.$rr->qty.'</span>'; 
    $summery_return .='</span><hr style="margin:3px"></div>'; 
} 

スクリプト

$summery_return .='<script> 
    $(document).ready(function(){ 

      $("#itmslct").click(function() { 
       var loc_proname = $(this).attr("data-proname"); 
       alert(loc_proname); 
      $("."+loc_proname).css("background-color", "#f00"); 

      }); 

      }); 
    </script>'; 
return $summery_return; 

製品

while($row = $result2->fetch_object()){   
    $icost=$row->quantity*$row->price; 
    $progress_return .='<tr class='.$row->product.'> 
      <td><b>'.$row->product.'</b></td> 
     <td><b>'.$row->type.'</b></td> 
     <td><b>'.$row->quantity.'</b></td> 
     <td><b>'.$row->pack.'</b></td> 
     <td><b>'.$row->topping.'</b></td> 
     <td><b>'.$row->extra.'</b></td> 
     <td><b>'.$row->comments.'</b></td> 
     <td><button style="background-color:red;color:white">Done</button></td> 
     </tr>';  
    $total=$total+$row->quantity*$row->price;     
} 

ながら、ときに私最初のwhileループで印刷された製品をクリックし、2番目のループで製品の背景色を変更します。 複数の製品は、同じ名前のテーブル内にあります、私は推測するループ

が、私はそれをやってみましたが、私はどんな結果に

Answer 1

が表示されていない間、私は最初で製品を選択すると、すべてそこに背景色を変更する必要がHTMLが有効でないため、コードが機能していません。 DOMでは; idは一意である必要があります。したがって、IDの重複を避けるためです。 PHPと対応するJSコードを変更してください。代わりにid="itmslct"の次のように我々はそれclassようになります：

while($rr = $retval->fetch_object()) { 
    $summery_return .= '<div class="w3-blue w3-card-4" style="font-size:18px;">'; 
    $summery_return .= '<span style="color:white;padding:2px;font-weight:bold" class="itmslct" data-proname='.$rr->product.'>'.$rr->product.'<span style="float:right;margin-right:19px;">'.$rr->qty.'</span>'; 
    $summery_return .='</span><hr style="margin:3px"></div>'; 
} 

および関連JSは、次のようになります。

$(document).ready(function(){ 

    $(".itmslct").click(function() { 
     var loc_proname = $(this).attr("data-proname"); 
     alert(loc_proname); 
     $("."+loc_proname).css("background-color", "#f00"); 
    }); 

}); 

Answer 2

idの一意である必要があります。代わりにクラスを使用する必要があります。

また、trの背景色を設定しているようです。

代わりにtdセルのスタイリングを試してください。

いずれセレクタ

$("."+loc_proname + ' td') 

またはtd要素にクラスを追加してそれらを標的とします。

スタイリング固有の要素セレクタがスタイルに合わせてうまく調整されないため、2番目のオプションをお勧めします。