如何使用jQuery更新数据表中的所有多行?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用jQuery更新数据表中的所有多行?相关的知识,希望对你有一定的参考价值。

我有一个带复选框的薪水数据表,一个选择以chantiers填充,还有一个按钮updateAll,当我检查薪水行并在select中选择一个chantier并单击按钮updateAll时,我想要一个chantier,薪水的chantier检查修改按值选择。注意:不更改选择值,即不触摸<option value="1">azilal</option> not <option value="azilal">azilal</option>在我的示例中,将azilal更改为2,但我想通过tizgui更改azilal,这只是一个示例

数据表

  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
              <select class="form-control" id="chantier">
                      <option selected disabled>Select Location</option>
                      <option value="1">azilal</option>
                      <option value="2">asfalou</option>
                      <option value="3">tizgui</option>
              </select>
           <button class="btn btn-theme update-all" data-url="">Update All</button>
              <table id="example" class="table table-striped table-bordered" style="width:100%">
                 <thead>
                  <tr>
                    <th><input type="checkbox" id="check_all"></th>
                    <th>nom prenom</th>
                    <th>cin</th>
                    <th>matricule</th>
                    <th>chantier</th>
                  </tr>
                 </thead>
                <tbody>
                  <tr id="1">
                    <td><input type="checkbox" class="checkbox" name="customer_id[]" value="1" /></td>
                    <td>MARZOUK NAJIB</td>
                    <td>Pa130191</td>
                    <td>2925019599</td>
                    <td value="1">azilal</td>
                  </tr>
                   <tr id="2">
                    <td><input type="checkbox" class="checkbox" name="customer_id[]" value="2" /></td>
                    <td>achraf bourki</td>
                    <td>pa5000</td>
                    <td>202020</td>
                    <td value="2">tizgui</td>
                  </tr>
                </tbody>
</table>

jQuery

   <script type="text/javascript">
    $(document).ready(function () {
        $('#check_all').on('click', function(e) {
         if($(this).is(':checked',true))  
         {
            $(".checkbox").prop('checked', true);  
         } else {  
            $(".checkbox").prop('checked',false);  
         }  
        });
         $('.checkbox').on('click',function(){
            if($('.checkbox:checked').length == $('.checkbox').length){
                $('#check_all').prop('checked',true);
            }else{
                $('#check_all').prop('checked',false);
            }
         });
        $('.update-all').on('click', function(e) {

          if(confirm("Are you sure you want to update this?"))
  {
   var id = [];
   var chantier;
   $(':checkbox:checked').each(function(i){
    id[i] = $(this).val();
   });
   if(id.length === 0){
    alert("Please Select atleast one checkbox");
   }else{
    let chantier = $('#chantier').val();
      for(var i=0; i<id.length; i++)
      {
        $('tr#'+id[i]).find('td:last-child').html(chantier);
      }  
   }}
  else{
   return false;
  }
    });
    });
</script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
答案
在javascript中,您正在选择

#chantier

的所选选项的值,而不是其文本。您需要做的就是更改此行,如下所示:

以上是关于如何使用jQuery更新数据表中的所有多行?的主要内容,如果未能解决你的问题,请参考以下文章

Python 操作Redis

python爬虫入门----- 阿里巴巴供应商爬虫

Python词典设置默认值小技巧

《python学习手册(第4版)》pdf

Django settings.py 的media路径设置

Python中的赋值,浅拷贝和深拷贝的区别