为什么我的代码在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属性，而不是其innerHTMLfunction editRow() {&nbsp; &nbsp; // You need to get elements by tag name, not childNodes&nbsp; &nbsp; var currentTD = selectedRow.getElementsByTagName("td");&nbsp; &nbsp; // You need to get elements by tag name, not childNodes&nbsp; &nbsp; var inputs = document.getElementById("inputs").getElementsByTagName("input");&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; for (i = 0; i < currentTD.length; i++) {&nbsp; &nbsp; console.log(inputs[i]);&nbsp; &nbsp; console.log(currentTD[i]);&nbsp; &nbsp; // set the "Value" of an input box, not its "innerHTML"&nbsp; &nbsp; // also you need to apply the [i] to the currentTD because it is a list&nbsp; &nbsp; inputs[i].value = currentTD[i].innerHTML;}

Answer 2

您可以尝试以下方法：$("body").on("click","tr",function(){&nbsp; //Just in case you are going to use dynamic content, because the click method doesn't work on dynamically created/added elements&nbsp; &nbsp; for(let i=0;i<7;i++){&nbsp; &nbsp; &nbsp; &nbsp; $("#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&nbsp; &nbsp; }});