时间戳

首页 > 解决方案 > 使用 jQuery 加载 html 页面时检查表值

javascript - 使用 jQuery 加载 html 页面时检查表值

问题描述

我最近开始使用 jQuery，我想要一些帮助，关于我想实现的功能，实际上我有一个 html 表，其中每一行都有课程、教授、日期、小时、状态和一个取消预订的按钮，我最初创建了一个小功能，当我单击该按钮时，它会将 STATUS 的值从 ACTIVE 更改为 CANCEL，然后通过帖子将数据发送到服务器。

这是我的代码 - 我正在使用 jsp 页面并使用 jstl 填充列

$(document).on('click', '.table-remove', function(e){
    var row = $(this).closest('tr');
    $(this).prop("disabled",true);
    var col1=row.find('td:eq(0)').text();
    var col2=row.find('td:eq(1)').text();
    var col3=row.find('td:eq(2)').text();
    var col4=row.find('td:eq(3)').text();
    var col5=row.find('td:eq(4)').text();
    var sessionValue= $("#hdnSession").data('value');
        $.post("Serverlet_prenotazioni_disdette",{corso:col1,professore:col2,giorno:col3,ora:col4,stato:col5,user:sessionValue},     
            function(data){
               row.find('td:eq(4)').html('Disdetta');
               alert(data);
            });    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table class="table table-bordered table-responsive-md table-hover text-center"   id="table">
            <tr style="background-color:#17a2b8;color:white">
                <th class="text-center">Utente</th>
                <th class="text-center">Corso</th>
                <th class="text-center">Professore</th>
                <th class="text-center">Giorno</th>
                <th class="text-center">Ora</th>
                <th class="text-center">Stato</th>
                <th class="text-center"> </th>        
            </tr>
            <tr>
                <c:forEach var = "rip" items = "${prenotazioni}">
                    <tr>
                        <td id="account" class="pt-3-half" contenteditable="false" name="account"><c:out value = "${rip.getAccount().getNickname()}"/></td>
                        <td id="corso" class="pt-3-half" contenteditable="false" name="corso"><c:out value = "${rip.getRipetizione().getCorso().getNome_Corso()}"/></td>
                        <td id="professore" class="pt-3-half" contenteditable="false" name="professore"><c:out value = "${rip.getRipetizione().getProfessore().getCognome()}"/></td>
                        <td id="giorno" class="pt-3-half" contenteditable="false" name="giorno"><c:out value = "${rip.getGiorno()}"/></td>
                        <td id="ora" class="pt-3-half" contenteditable="false" name="ora"><c:out value = "${rip.getOra()}"/></td>
                        <td id="stato" class="pt-3-half" contenteditable="false" name="stato"><c:out value = "${rip.getStato()}"/></td>
                        <td>
                           <span  id="table-remove" class="table-remove"><button type="button" id="button-d" class="btn btn-success" >Prenota</button></span>
                        </td>
                    </tr>
                </c:forEach>

我想创建一个函数，在加载页面时分析 STATUS 列并在其中找到“已删除”我必须禁用按钮并将文本“已取消”的颜色从黑色更改为红色，而在哪里状态有值“激活”他必须什么都不做

我试着做这个功能

$(document).load('.table-remove',function(){
   var row = $(this).closest('tr');
   var text=row.find('td:eq(4)').text();
   if(text==="Disdetta"){
       $(this).prop("disabled",true);
   }
});

但这样做不再有效

标签： javascriptjqueryhtml

解决方案

这是一个简化的示例，展示了您可以如何做：

// on load...
$(document).ready(function() {
  // ...for each row...
  $('tbody tr').each(function() {
    var $statusCell = $(this).find('td:first-child');
    // ...get status
    var status = $statusCell.text();
    // if status is "Deleted"...
    if (status === 'Deleted') {
      // ...disable button...
      $(this).find('button').prop('disabled', true);
      // ...and change text color
      $statusCell.css('color', 'red');
    }
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Deleted</td>
        <td>
          <button>Do something</button>
        </td>
      </tr>
      <tr>
        <td>Other status</td>
        <td>
          <button>Do something</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

推荐阅读