更改表格行而不填充文本框？

Question

我试图通过单击“编辑”按钮来编辑表格的行。我可以选择某一行并进行更新；但是，由于表单名称选择器会更改值，因此在编辑文本框时它会填充文本框：

 $("input[name='name']").val(currentTD[1].innerText);
 $("input[name='email']").val(currentTD[2].innerText);
 $("input[name='phone']").val(currentTD[3].innerText);

我在文本框和隐藏的输入中使用相同的名称。

是否可以对输入类型（“文本框”和“隐藏”）继续使用相同的名称，而不必填写“文本框”输入呢？另外，不使用任何ID？

谢谢

var globalIndex  = 0;
  $(document).ready(function() {
    // create the original collection of student records.
    let arr1 = generateItem();
    if (arr1) {
    
      var tr;
      tr = $('<tr class="student-row">');
      tr.append("<td>" +"<button id='addBtn' type='button' class='btn btn-success addBtn' data-target='#addBtn' style='width:50px'>Add</button>" + "</td>");
      tr.append("<td>" + ("<input type='text' class='form-control' style='width:50px' name='name' id='name'>") + "</td>");
      tr.append("<td>" + ("<input type='text' class='form-control' style='width:80px' name='email' id='email'>") + "</td>");
        tr.append("<td>" + ("<input type='text' class='form-control' style='width:80px' name='phone' id='phone'>") + "</td>");
        
    $('#parentTableBody').append(tr);
    
      let arr2 = [...arr1];
      
      // For each member of the student collection, create a table row.
      $.each(arr2, function(index, element) {
        // createRow() creates the DOM student row.
        let myRow = createRow(globalIndex, element);
        // Stick that row we just created into the parent table.
        $('#parentTableBody').append(myRow);
      });
    }

    $("#addBtn").click(function() {
      // Get all the text input fields for this form.
      let inputs = $(this).parent().siblings().find("input[type='text']");
      // Create an empty student object.
      let myStudentObj = {};
      inputs.each(function(index, input){
        let propName = $(input).prop("name")
                               .toLowerCase();
        propName = propName.replace(propName[0], propName[0].toUpperCase());
        myStudentObj[propName] = $(input).val();
   
        $(input).val("");
      });

      let myStudentIndex = $("#parentTableBody tr.student-row").length,
          
      // And we can create that DOM fragment, as we did when we initialized the list above.
          myRow = createRow(myStudentIndex, myStudentObj);
      // add our newly created DOM fragment to the parent container.
      $("#parentTableBody").append(myRow);
      
      
  
    });
  
     $(".editBtn").on('click', function() {

        //Get the all the tds within the tr using the below code
        var currentTD = $(this).parents('tr').find('td');
        if ($(this).html() == '') {
            currentTD = $(this).parents('tr').find('td');
            //Then as usual iterate through each tds and change its contenteditable property like below
            $.each(currentTD, function() {
                $(this).prop('contenteditable', true);
            });
        } else {
            $.each(currentTD, function() {
                $("input[name='name']").val(currentTD[1].innerText);
                $("input[name='email']").val(currentTD[2].innerText);
                $("input[name='phone']").val(currentTD[3].innerText);
                $(this).prop('contenteditable', false);
            });
        }

        $(this).html($(this).html() == '' ? 'Save' : '');

    });
    
  });
  

  
  function generateItem() {
    var kids = [{
        Name: "Gina",
        Email: "gina@email.com",
        Phone: "211-456-1234"
      },
      {
        Name: "Mark",
        Email: "mark@email.com",
        Phone: "144-411-2312"
      },
      {
        Name: "Jake",
        Email: "jake@email.com",
        Phone: "333-211-1111"
      }
    ];
    return kids;
  }
  /****
  * createRow() -- create the student row DOM fragment.
  ****/
  function createRow(index, obj) {
    // console.log(obj);
   globalIndex++;
    tr = $('<tr class="student-row">');
    tr.append("<td>" + "<button id='editBtn" + globalIndex + "' type='button' class='btn btn-info editBtn'></button>" +
       "</td>");
    tr.append("<td>" + "<input type='hidden' name='name' value = '" + (obj.Name || "") + "' >" + (obj.Name || "") + "</td>");
    tr.append("<td>" + "<input type='hidden' name='email' value = '" + (obj.Email || "") + "' >" + (obj.Email || "") + "</td>");
    tr.append("<td>" + "<input type='hidden' name='phone' value = '" + (obj.Phone || "") + "' >" + (obj.Phone || "") + "</td>");
    return tr;
  }

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
	  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  
<form id= "formBod">
<table id="parentTable">
		<thead>
		  <tr class="category">
			<th></th>
			<th>Name</th>
			<th>Email</th>
			<th>Phone</th>
		  </tr>
		</thead>
	  
		<tbody id="parentTableBody">
   
		</tbody>
	  </table>
</form>