为什么我的代码在innerHtml上返回“undefined”？

Question

我做了一个监听器，将id“selectedRow”附加到用户点击的行上。那里的意图是能够操纵该行中的数据;以前我使用的内容是可编辑的，但是我试图让用户更清楚地知道他们正在编辑一行（这是一个项目），所以我创建了一个编辑面板来实现这一点。然而，在将TD发送到输入框时使用.innerHTML时，我遇到了一些问题，其中大量数据被返回为未定义。

我尝试过使用.HTML

$('tr').click(function() {
    if(document.getElementById("SELECTEDROW")) {
        var oldRow = document.getElementById("SELECTEDROW");
        oldRow.classList.remove("selected");
        $("#SELECTEDROW").removeAttr('id');
    }

    $(this).attr('id', 'SELECTEDROW'); 
    selectedRow = document.getElementById("SELECTEDROW");
    table = selectedRow.parentNode;
    console.log("Row " + selectedRow.childNodes[1].innerHTML + " Selected");
    selectedRow.classList.add("selected");
    editRow();
});


function editRow() {
  var currentTD = selectedRow.childNodes;
  var inputs = document.getElementById("inputs").childNodes;
  var i = 0;
  for (i = 0; i < currentTD.length; i++) {
    inputs[i].innerHTML = currentTD.html;
  }

  console.log('Now Editing:' + currentTD[1].innerHTML);
  document.getElementById("editingPanel").style.display = "block";
  document.getElementById("content").style.height = "49%";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Role</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Password</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Bill Robbins</td>
            <td>Conductor</td>
            <td>12, Caldrow Ave, Plymouth, Pl21XE</td>
            <td>01921202384</td>
            <td>[email protected]</td>
            <td>CaTsRbAe1967</td>

        </tr>
        <tr>
            <td>2</td>
            <td>Kat Robbins</td>
            <td>Admin</td>
            <td>12, Caldrow Ave, Plymouth, Pl21XE</td>
            <td>019232042454</td>
            <td>[email protected]</td>
            <td>thR33mel0ns</td>

        </tr>
    </table>
</div>

<div id="editingPanel">
    <div id="inputFields">
        <form id="inputs">
            <input id="input1" type="text" name=""/>
            <input id="input2" type="text" name="">
            <input id="input3" type="text" name="">
            <input id="input4" type="text" name="">
            <input id="input5" type="text" name="">
            <input id="input6" type="text" name="">
            <input id="input7" type="text" name="">
            <input id="input8" type="text" name="">
        </form>
    </div>
    <div id="editButtons">                  
            <button onclick="addRow()">New Row</button>
            <button onclick="editRow()">Save Row</button>
            <button onclick="removeRow()">Delete Row</button>
        </div>
</div>

预期的输出将是每个td的文本被复制到输入框中。

Answer 1

你需要正确地让孩子们。您还需要将文本分配给输入的value属性，而不是其innerHTML

function editRow() {
    // You need to get elements by tag name, not childNodes
    var currentTD = selectedRow.getElementsByTagName("td");
    // You need to get elements by tag name, not childNodes
    var inputs = document.getElementById("inputs").getElementsByTagName("input");
    var i = 0;
    for (i = 0; i < currentTD.length; i++) {
    console.log(inputs[i]);
    console.log(currentTD[i]);
    // set the "Value" of an input box, not its "innerHTML"
    // also you need to apply the [i] to the currentTD because it is a list
    inputs[i].value = currentTD[i].innerHTML;
}

Answer 2

你可以试试这个：

$("body").on("click","tr",function(){  //Just in case you are going to use dynamic content, because the click method doesn't work on dynamically created/added elements
    for(let i=0;i<7;i++){
        $("#input"+(i+1)).val($(this).children()[i].innerHTML); //You are using jQuery for a reason, to simplify code, so avoid using unnecessary JS where you can by using simplified jQuery
    }
});