Hallo, wie bearbeitet man nur ein paar Spalten und nicht alle? auf jquery und html?

-2

Ich wollte nur das Datum und den Wert bearbeitet werden, wie man diesen Fehler beheben kann? Genau darunter ist der Code.Hallo, wie bearbeitet man nur ein paar Spalten und nicht alle? auf jquery und html?

$(document).ready(function(){ 
 
    $('#tblEditavel tbody tr').each(function(i){ 
 
     $(this).children('td').each(function(p){ 
 
      $(this).dblclick(function(){ 
 
      if($('td > input').length > 0) { 
 
       return; 
 
      } 
 
       var conteudoOriginal = $(this).text(); 
 
       var novoElemento = $('<input/>', {type:'text', value: conteudoOriginal}); 
 
        $(this).html(novoElemento.bind('blur keydown', function(e) { 
 
        var keyCode = e.which; 
 
        var conteudoNovo = $(this).val(); 
 
        if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) { 
 
         var objeto = $(this); 
 
         $.ajax({ 
 
         type: "POST", 
 
         url: "alterar.php", 
 
         data: { 
 
          id: $(this).parents('tr').children().first().text(), 
 
          campo: $(this).parent().attr('title'), 
 
          valor: conteudoNovo 
 
         }, 
 
          success: function(result) { 
 
           objeto.parent().html(conteudoNovo); 
 
           $('body').append(result); 
 
          } 
 
         }) 
 
         var posicao = p + 1; 
 
         $(this).parent() 
 
           .html(conteudoNovo) 
 
           .parents('tr') 
 
           .next() 
 
           .children('td:nth-child('+posicao+')') 
 
           .trigger('dblclick'); 
 
        
 
        } 
 
\t \t  else if (keyCode == 27 || e.type == 'blur') 
 
         $(this).parent().html(conteudoOriginal); 
 
        
 
        })); 
 
        $(this).children().select(); 
 
      }); 
 
     }); 
 
    }); 
 
})

table{ 
 
       border-collapse: collapse; 
 
      } 
 
      table, td, th{ 
 
       border: 1px solid black; 
 
       padding: 5px; 
 
       
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <table id="tblEditavel"> 
 
      <thead> 
 
       <tr> 
 
        <th>Id</th> 
 
        <th>Name</th> 
 
        <th>R$</th> 
 
        <th>Date pay</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>74</td> 
 
        <td title="Nome" class="editavel">Microsoft</td> 
 
        <td title="valor" class="editavel">2.350,00</td> 
 
        <td title="vencimento" class="editavel">10/02/2017</td> 
 
       </tr> 
 
       <tr> 
 
        <td>75</td> 
 
        <td title="Nome" class="editavel">Microsoft</td> 
 
        <td title="valor" class="editavel">2.350,00</td> 
 
        <td title="vencimento" class="editavel">10/03/2017</td> 
 
       </tr> 
 
       <tr> 
 
        <td>76</td> 
 
        <td title="Nome" class="editavel">Microsoft</td> 
 
        <td title="valor" class="editavel">2.350,00</td> 
 
        <td title="vencimento" class="editavel">10/04/2017</td> 
 
       </tr> 
 
       <tr> 
 
        <td>77</td> 
 
        <td title="Nome" class="editavel">Microsoft</td> 
 
        <td title="valor" class="editavel">2.350,00</td> 
 
        <td title="vencimento" class="editavel">10/05/2017</td> 
 
       </tr> 
 
       <tr> 
 
        <td>78</td> 
 
        <td title="Nome" class="editavel">Microsoft</td> 
 
        <td title="valor" class="editavel">2.350,00</td> 
 
        <td title="vencimento" class="editavel">10/06/2017</td> 
 
       </tr> 
 
      </tbody> 
 
     </table>

bereits versucht $('#tblEditavel tbody tr td.editavel').each(function(i)') aber es funktioniert nicht. Wo ich falsch liege, funktioniert Ajax normal, aber Doppelklick auf eine andere Spalte erzeugt einen Fehler, da ich nur zwei Spalten bearbeiten möchte.

Quelle

2017-02-02 WMomesso

Sie müssen Event-Handler nicht verwenden '.each()', wenn die Bindung. Einfach an die gesamte Sammlung binden, jQuery iteriert automatisch. – Barmar

Ich könnte nicht verstehen, was Sie wollen. Möchten Sie R $ und Datum Feld bearbeiten bearbeitbar machen? Wie wenn Sie darauf klicken? – Nezih

@Nezih Ja, nur diese zwei Felder und nicht die ganze Tabelle. Vielen Dank. – WMomesso

Die Verwendung von $('#tblEditavel tbody tr td.editavel').dblclick() funktioniert, solange Sie class="editavel" aus dem Namen TD s.

$(document).ready(function() { 
 
    $('#tblEditavel tbody tr td.editavel').dblclick(function(p) { 
 
    if ($('td > input').length > 0) { 
 
     return; 
 
    } 
 
    var conteudoOriginal = $(this).text(); 
 
    var novoElemento = $('<input/>', { 
 
     type: 'text', 
 
     value: conteudoOriginal 
 
    }); 
 
    $(this).html(novoElemento.bind('blur keydown', function(e) { 
 
     var keyCode = e.which; 
 
     var conteudoNovo = $(this).val(); 
 
     if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) { 
 
     var objeto = $(this); 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: "alterar.php", 
 
      data: { 
 
      id: $(this).parents('tr').children().first().text(), 
 
      campo: $(this).parent().attr('title'), 
 
      valor: conteudoNovo 
 
      }, 
 
      success: function(result) { 
 
      objeto.parent().html(conteudoNovo); 
 
      $('body').append(result); 
 
      } 
 
     }) 
 
     var posicao = p + 1; 
 
     $(this).parent() 
 
      .html(conteudoNovo) 
 
      .parents('tr') 
 
      .next() 
 
      .children('td:nth-child(' + posicao + ')') 
 
      .trigger('dblclick'); 
 

 
     } else if (keyCode == 27 || e.type == 'blur') 
 
     $(this).parent().html(conteudoOriginal); 
 

 
    })); 
 
    $(this).children().select(); 
 
    }); 
 
})

table { 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<table id="tblEditavel"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
     <th>R$</th> 
 
     <th>Date pay</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>74</td> 
 
     <td title="Nome">Microsoft</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/02/2017</td> 
 
    </tr> 
 
    <tr> 
 
     <td>75</td> 
 
     <td title="Nome">Microsoft</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/03/2017</td> 
 
    </tr> 
 
    <tr> 
 
     <td>76</td> 
 
     <td title="Nome">Microsoft</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/04/2017</td> 
 
    </tr> 
 
    <tr> 
 
     <td>77</td> 
 
     <td title="Nome">Microsoft</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/05/2017</td> 
 
    </tr> 
 
    <tr> 
 
     <td>78</td> 
 
     <td title="Nome">Microsoft</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/06/2017</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2017-02-02 18:59:46 Barmar

Hallo, wie bearbeitet man nur ein paar Spalten und nicht alle? auf jquery und html?

Antwort

Verwandte Themen