我的HTML表从数据库中提取数据。数据库中的行是在HTML表中提取的。每个表都有一个按钮。我想单击特定行并突出显示该特定按钮。
try{
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost/lvcdatabase","root","java");
String query = "Select * from kitchentable;";
PreparedStatement pst = conn.prepareStatement(query);
ResultSet rs =pst.executeQuery(query);
while(rs.next()){
%>
<form action="processorder" method="">
<table id="example" >
<%String s = String.valueOf(rs.getInt("orderno"));%>
<tr id="row<%=s%>" onclick="a(<%=s%>)">
<td><%=rs.getInt("orderno")%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(5)%></td>
<td><input class="service" id="service<%=s%>" onclick="b(<%=s%>)" type="button" value="Service Status"></td>
</tr>
<tr id="buttonrow">
<td colspan="1"></td>
<td colspan="1"><input type="button" style="background-color:#ff0000" value="Pending" id="redbutton<%=s%>" class="statusbutton"></td>
<td colspan="1"><input type="button" style="background-color:#ffbf50" value="Cooking" id="amberbutton<%=s%>" class="statusbutton"></td>
<td colspan="1"><input type="button" style="background-color:#66ff66" value="Cooked" id="greenbutton<%=s%>" class="statusbutton"></td>
<td colspan="1"></td>
</tr>
</form><br>
<%} %>
</table>
<%rs.close();
pst.close();
conn.close();
}catch(Exception e){
System.out.println("Error: "+e.getMessage());
}
%>
我的javascript代码: (通过谷歌搜索帮助我,我得到了所需的输出)
<script>
function a(x){
document.getElementById("redbutton"+x).style.backgroundColor ="#b20000";
document.getElementById("redbutton"+x).value="Queued";
document.getElementById("amberbutton"+x).style.backgroundColor="#ffbf00";
document.getElementById("amberbutton"+x).value ="Processing";
}
function b(x){
document.getElementById("greenbutton"+x).style.backgroundColor="green";
document.getElementById("amberbutton"+x).style.backgroundColor="#ffbf50";
document.getElementById("service"+x).value="Serviced";
}