为什么我的代码在innerHtml上返回“未定义”？

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>[e-mail]</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>[e-mail]</td>            <td>thR33mel0ns</td>        </tr>    </table>预期的输出是将每个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

    }

});