行のすべてのセルをループする

Question

私はこれが他の人にとってはとても簡単だと知っています。私はちょうど意見が必要ですどのようにすべての行でセルの値をループすることができますか？別の入力または行を作成するオプションを作成したためです。私はこれを試みたが、行ごとに最初のセルだけを取得します。

for (var i = 1; i<table.rows.length; i++) 
{ 
    alert(table.rows[i].cells[0].children[0].value);  
} 

$(document).ready(function() { 
 
    $("#addMore").click(function() { 
 
    $("#customFields").append('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>'); 
 
    }); 
 

 
    $("#removeRow").click(function() { 
 
    if ($('#customFields tbody tr').length == 1) { 
 
     alert('Error'); 
 
    } else { 
 
     $('#customFields tr:last').remove(); 
 
    } 
 

 
    }); 
 

 
}); 
 

 
function myFunction() { 
 

 
    var table = document.getElementById("customFields"); 
 

 
    for (var i = 1; i < table.rows.length; i++) { 
 
    alert(table.rows[i].cells[0].children[0].value); 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 

 
    <table class="table" id="customFields"> 
 

 
    <thead> 
 
     <tr> 
 
     <th>First Name</th> 
 
     <th>Middle Name</th> 
 
     <th>Last Name</th> 
 
     <th>Nick Name</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <input type="text" class="form-control"> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="form-control"> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="form-control"> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="form-control"> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 

 
    <button type="submit" class="btn btn-primary" id="addMore">+ Add</button> 
 
    <button type="submit" class="btn btn-danger" id="removeRow">- Remove</button> 
 
    <a href="javascript:myFunction()">Run</a> 
 
</div>

Answer 1

あなたはjQueryのを使用する - なぜ続けませんか？

$(function() { 
    $("#run").on("click",function(e) { 
    e.preventDefault(); 
    $("#customFields > tbody > tr > td > input").each(function() { 
// or $("#customFields tbody").find("input").each... 
     console.log($(this).val()); 
    }); 
    }); 
}); 

とボタンに変更し、リンクに私はJavaScriptでも、私の知識を探求したかっID

<button type="button" class="btn btn-primary" id="addMore">+ Add</button> 
<button type="button" class="btn btn-danger" id="removeRow">- Remove</button> 
<a href="#" id="run">Run</a>