Question

我最近开始使用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);
   }
});

但这样做不再有效

Answer 1

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

// 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>

使用jQuery加载HTML页面时检查表值

1 个答案: