Блог

С помощью кнопки я намерен использовать значение флажка для редактирования строки в базе данных.

Мой код организован следующим образом. Сначала я начинаю с создания моей таблицы следующим образом:

HTML:

 <table id="tabfor" class="table">
    <thead> 
        <tr> 
            <th class="table__heading"><FONT COLOR="#ffffff"><i class="fa fa-pencil" aria-hidden="true"></FONT></i></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Registo</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Fornecedor</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Nif</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Contato</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Morada</FONT></th> 
            <th class="table__heading"><FONT COLOR="#ffffff">Postal</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Email</FONT></th>
            <th class="table__heading"><FONT COLOR="#ffffff">Colaboorador</FONT></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table> 
  

Я динамически создаю таблицу:

 $.getJSON('perfilfor.php', function (data) {

$('#tabfor').dataTable().fnDestroy();
var linha = ``; 

for (var i = 0; i < data.length; i  ) { 
   Id = data[i][0];
   DataRegisto = data[i][1];
   Fornecedor = data[i][2];
   Nif = data[i][3];
   Contato = data[i][4];
   Morada = data[i][5];
   Postal = data[i][6];
   Email = data[i][7];
   Nome = data[i][8];



      linha  = `<tr class="table__row">
       <td  class="table__content" data-heading="Atualizar"><input type="checkbox" name="update" id="update" value="${ Id }"></td>     
       <td class="table__content" data-heading="Registo"><FONT COLOR="#ffffff">${ DataRegisto }</FONT></td> 
       <td class="table__content" data-heading="Nome"><FONT COLOR="#ffffff">${ Fornecedor }</FONT></td>
       <td class="table__content" data-heading="Nif"><FONT COLOR="#ffffff">${ Nif }</FONT></td>
       <td class="table__content" data-heading="Contato"><FONT COLOR="#ffffff">${ Contato }</FONT></td> 
       <td class="table__content" data-heading="Morada"><FONT COLOR="#ffffff">${ Morada }</FONT></td>
       <td class="table__content" data-heading="CEP"><FONT COLOR="#ffffff">${ Postal }</FONT></td> 
       <td class="table__content" data-heading="Email"><FONT COLOR="#ffffff">${ Email }</FONT></td>
       <td class="table__content" data-heading="Colaborador"><FONT COLOR="#ffffff">${ Nome }</FONT></td>       
       </tr>`; 
    }
    $("#tabfor tbody").html(linha);
});
  

В этой таблице в первом td я создаю ввод checkbox , чтобы получить идентификатор строки, которую я хочу отредактировать.

Теперь я создал кнопку для редактирования следующим образом:

 <button href="s7" class="btn btn-warning caixa btn-show close-sidebar upd_forn" data-element="#minhaDiv6" style="float:right;"><i class="fa fa-pencil-square fa-5x taman" aria-hidden="true"></i>
<br>
    <h4>Editar</h4>
    <h4>Fornecedor</h4>
</button>
  

Теперь в js я намерен принять значение флажка, которое я создал в предыдущей таблице. Я пытаюсь так:

 $(document).on('click', '.upd_forn', function(){ 

   var updf = $("#update").is(":checked") ? $("#update").val() : '';

   $.ajax({  
        url:"updforn.php",  
        method:"POST",
        cache: false,               
        data:{updf:updf},               
        dataType:"json",  
        success:function(data){
            
            for (var i = 0; i < data.length; i  ) { 
                       
               Id = data[i][0];
               Fornecedor = data[i][1];
               Nif = data[i][2];
               Contato = data[i][3];
               Morada = data[i][4];
               Postal = data[i][5];
               Email = data[i][6];
               Colaborador = data[i][7];
            
             $('#Idf').val(Id);
             $('#Fornecedor1').val(Fornecedor);
             $('#Nif2').val(Nif);
             $('#Contato2').val(Contato);
             $('#Morada2').val(Morada);
             $('#Postal2').val(Postal);
             $('#Email3').val(Email);
             $('#minhaDiv6').show();
             $('#minhaDiv1').hide();
            }
        }

    });
});
  

Но таким образом он возвращает значение только в том случае, если вы установите флажок в первой строке, которая возвращается из таблицы базы данных.
Выбор одной из других строк больше не возвращает идентификатор строки.

Я решил свою проблему, используя querySelector , который таким образом принимает идентификатор выбранного радиовхода.

завершите код:

 var updf = document.querySelector('input[name="update"]:checked').value;