根据提交的表单值更改表格的颜色

时间:2019-05-14 12:47:29

标签: html css jsp html-table

在我的jsp页面中,我试图根据输入的表单值更改行的颜色。我想在更改用户列的值时更改行的颜色。 例如,如果我将用户的列值更改为false,则整个行的颜色应更改为我指定的颜色。  我不知道该怎么做

<table>
        <tr>
            <th>pharmacist id</th>
            <th>employee id</th>
            <th>firstname</th>
            <th>lastname</th>
            <th>email</th>
            <th>address</th>
            <th>phone</th>
            <th>salary</th>
            <th>User Availabilty</th>
            <th>Action</th>
        </tr>
        <c:forEach var="thepharmas" items="${Pharmacist_list}"> 

        <!-- set up a link for each pharmacist -->
        <c:url var="templink" value="PharmacistControllerServlet">
            <c:param name="command" value="LOAD"/>
            <c:param name="pharmacist_peid" value="${thepharmas.peid}"/>

        </c:url>
        <!-- link for delete pharmacist -->
        <c:url var="deletelink" value="PharmacistControllerServlet">
            <c:param name="command" value="DELETE"/>
            <c:param name="pharmacist_peid" value="${thepharmas.peid}"/>
            </c:url>
        <tr class="${thepharmas.user ? 'red_bg' : ''}">
        <td>${thepharmas.eid}</td>
        <td>${thepharmas.peid}</td>
        <td>${thepharmas.firstname}</td>
        <td>${thepharmas.lastname}</td>
        <td>${thepharmas.email}</td>
        <td>${thepharmas.address}</td>
        <td>${thepharmas.mobileNo}</td>
        <td>${thepharmas.basicSal}</td>
        <td>${thepharmas.user}</td>
        <td><a href="${templink}">Update</a>
            |
            <a href="${deletelink}"
            onclick="if(!(confirm('Are you sure you want to delete this pharmacist?'))) return false">
            Delete</a>
        </td>

        </tr>

    </c:forEach>


    </table>

更改用户列的值。根据用户列的值,我要更改整个行的值。

1 个答案:

答案 0 :(得分:1)

也许您正在使用jquery jsfiddle查找类似的内容 html样本:

<table>
<tr>
  <td>no</td>
  <td>yes</td>
</tr>
<tr>
  <td>yes</td>
  <td>yes</td>
</tr>
</table>

和一些CSS:

table{
  border:none;
}
td{
  border:none;
}
.red_bg{
 background:red;
 color:#fff;

}

和js:

$(document).ready(function(){
   $('table tr').each(function(){
     if($(this).children('td:nth-child(1)').text()=='no'){
       $(this).addClass('red_bg');
      }
    });    
});

编辑 您可以尝试使用if else语句 喜欢

<tr style="${thepharmas.user ? 'background:red;' : ''}">
</tr>