Traverser les lignes d'un tableau

Question

J'ai un tableau avec plusieurs lignes de tableau à l'intérieur, chaque td a une entrée à l'intérieur, j'essaie de traverser à l'intérieur de la ligne de tableau afin que je puisse définir la valeur d'une entrée à travers une autre entrée, cela ne fonctionne que pour la première ligne de tableau, comment puis-je faire pour toutes les lignes dans le tableau ? et j'ai un bouton qui ajoute un tr lorsque j'ai ajouté un nouveau tr, il ne définit pas la valeur à l'intérieur, voici mon code :

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
             '<td><input type="text"></td>' +
             '<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
  </tbody>
</table>

<button>Append row</button>

Answer 1

Le problème est que vous utilisez id 's. Par définition, id doivent être uniques. Lorsque votre code s'exécute, il ne s'applique qu'au premier élément avec ce "s". id qu'il trouve. Il suffit de changer votre id à class devrait faire l'affaire (pour cette partie).

Deuxièmement, il semble que vous créez des lignes de manière dynamique (en ajoutant tr Exécutez cette même fonction chaque fois que vous insérez de nouvelles lignes :

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);
    $('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>

<button>Append row</button>

Answer 2

Votre problème est que vous utilisez des ID, qui doivent être uniques en HTML. Remplacez-les par des classes et cela devrait fonctionner comme prévu.

function addVal() {
  var elems = $('.myFirstInput').closest('tr').find('.mySecondInput');
  $.each(elems, function(s, e) {
  if($(e).val() === '') {
      $(e).val('1000');
   }
  });
}

$(document).ready(function() {
$('button').click(function () {
            var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
            $('tbody').append(tr);
      addVal();
        });

    addVal();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
  </tbody>
</table>

<button>Append row</button>

Answer 3

Il n'est pas correct d'utiliser plusieurs id avec le même nom dans le même document . Utilisez class plutôt de la manière suivante :

$('input.mySecondInput').each(function(i, el){
  $(el).val('1000');
});

$('button#btnAppendRow').click(function () {
  var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
  '<td><input type="text"></td>' +
  '<td><input type="text" class="mySecondInput"></td></tr>';
  $('tbody').append(tr);

  $('input.mySecondInput:last-child').val('1000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
  </tbody>
</table>

<button id="btnAppendRow">Append row</button>

Answer 4

Vous devez donner des identifiants uniques pour chaque élément d'entrée. La première ligne doit avoir maPremièreEntrée1 y maSecondeEntrée1 . Deuxième rang, maPremièreEntrée2 y maSecondeEntrée2 et ainsi de suite. De cette façon, vous pourrez référencer chaque entrée avec précision.