Цитирование через каждую ячейку в строке

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()); 
    }); 
    }); 
}); 

и изменить к кнопкам и дать ссылку идентификатор

<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>