如何使用javascript将表中单元格的值设置为文本输入onclick的值？

我试图能够在文本输入和现有表格的选择输入中显示数据，即单击编辑按钮（每行一个），插入数据。我还希望它使用

this

函数（我不确定是否使用该函数），以便只将单击的行中的数据输入到文本输入中。当前，这些值显示为未定义。对不起，代码太乱了

函数显示学生（学生）{
让新闻学生=
`
${student.firstName}
${student.lastName}
${student.grade}
${student.email}
`;
document.getElementById（'studentTable'）。innerHTML+=newStudent；
}
函数editStudent（）{
document.getElementById（“firstName”）.value=this.document.getElementsByTagName（“td”）[0]。value；
document.getElementById（“lastName”）.value=this.document.getElementsByTagName（“td”）[1]。value；
document.getElementById（“grade”）.value=this.document.getElementsByTagName（“td”）[2]。value；
document.getElementById（“email”）.value=this.document.getElementsByTagName（“td”）[3]。value；
}

名字
姓
等级
电子邮件
名字
姓
等级
10
11
12
电子邮件

请不要传递

此

，传递

事件

，您可以获取当前行的详细信息并填写输入

<td><input type="button" value="EDIT" class="editButton" onclick="editStudent(event)"></td>


function editStudent(e) {
    e.preventDefault();
    document.getElementById("firstName").value = e.target.parentElement.parentElement.children[0].textContent;
    document.getElementById("lastName").value = e.target.parentElement.parentElement.children[1].textContent;
    document.getElementById("grade").value = e.target.parentElement.parentElement.children[2].textContent;
    document.getElementById("email").value = e.target.parentElement.parentElement.children[3].textContent;
}

功能编辑学生（e）{
e、 预防默认值（）；
document.getElementById（“firstName”）.value=e.target.parentElement.parentElement.children[0]。textContent；
document.getElementById（“lastName”）.value=e.target.parentElement.parentElement.children[1]。textContent；
document.getElementById（“grade”）.value=e.target.parentElement.parentElement.children[2]。textContent；
document.getElementById（“email”）.value=e.target.parentElement.parentElement.children[3]。textContent；
}

我准备了一个更详细的示例，其中ID是动态生成的，按钮的名称和“onclick”函数内容会根据操作而变化

下面是我用来编辑它的codepen视图：

名字
姓
等级
电子邮件
弗斯特
名称
姓
等级
10
11
12
电子邮件
插入
函数insertStudent（）{
var student={firstName:，lastName:，年级：，
电子邮件：“}；
student.firstName=
document.getElementById（“firstName”）.value；
student.lastName=document.getElementById（“lastName”）.value；
student.grade=document.getElementById（“grade”）.value；
student.email=document.getElementById（“email”）.value；
学生；
}
函数显示学生（学生）
{
var cc=Math.random（）；
让新闻学生=
`
${student.firstName}
${student.lastName}
${student.grade}
${student.email}
`;
document.getElementById（“studentTable”）.innerHTML+=
新闻学生；
document.getElementById（“firstName”）.value=“”；
document.getElementById（“lastName”）.value=“”；
文件.getElementById（“等级”）.value=“”；
document.getElementById（“电子邮件”）.value=“”；
}
函数editStudent（val）
{
document.getElementById（“firstName”）。值=
document.getElementById(
“fn_”+val）.innerHTML；
document.getElementById（“lastName”）。值=
document.getElementById(
“ln_”+val）.innerHTML；
document.getElementById（“等级”）。值=
document.getElementById(
“gr_”+val）；
document.getElementById（“电子邮件”）。值=
document.getElementById(
“em_”+val）；
document.getElementById（“btnEditUpdate”）.onclick=函数
() {
更新学生（val）；
}无效0；
document.getElementById（“btnEditUpdate”）.innerHTML=
“更新”；
}
函数updateStudent（val）
{
document.getElementById（“fn_216;”+val）.innerHTML=
document.getElementById(
“名字”）。价值；
document.getElementById（“ln_3;”+val）.innerHTML=
document.getElementById(
“姓氏”）。价值；
document.getElementById（“gr_u3;”+val）.innerHTML=
document.getElementById(
“等级”）。价值；
document.getElementById（“em_216;”+val）.innerHTML=
document.getElementById(
“电子邮件”）。价值；
document.getElementById（“firstName”）.value=“”；
document.getElementById（“lastName”）.value=“”；
文件.getElementById（“等级”）.value=“”；
document.getElementById（“电子邮件”）.value=“”；
document.getElementById（“btnEditUpdate”）.onclick=function（）
{
insertStudent（）；
};
document.getElementById（“btnEditUpdate”）.innerHTML=
“插入”；
}

    <table id="studentTable">
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Grade</th>
                                <th>Email</th>
                            </tr>
    </table>

    <div id="editFields">
                            <div class="fields">
                                <label for="firstName">First          

    Name</label>
                                <input id="firstName"     
    type="text">
                            </div>
                            <div class="fields">
                                <label for="lastName">Last Name</label>
                                <input id="lastName" type="text">
                            </div>
                            <div class="fields">
                                <label for="grade">Grade</label>
                                <select id="grade">
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
                            </div>
                            <div class="fields">
                                <label for="email">Email</label>
                                <input id="email" type="text">
                            </div>
  
      <button type="button" id="btnEditUpdate"     
     onclick="insertStudent();">Insert</button> 


    function insertStudent() {
        var student = { firstName: "", lastName: "", grade: "", 
        email: "" };
        student.firstName = 
        document.getElementById("firstName").value;
        student.lastName = document.getElementById("lastName").value;
        student.grade = document.getElementById("grade").value;
        student.email = document.getElementById("email").value;
        displayStudent(student);
    }
    function displayStudent(student) 
    {
        var cc = Math.random(); 
        let newStudent =
        `<tr>
                <td id="fn_` +
        cc +
        `">${student.firstName}</td>
                <td id="ln_` +
        cc +
        `">${student.lastName}</td>
                <td id="gr_` +
        cc +
        `">${student.grade}</td>
                <td id="em_` +
        cc +
        `">${student.email}</td>
                <td><input type="button" value="EDIT" 
        class="editButton"    
                    onclick="editStudent(` +
        cc +
        `)"></td>
            </tr>`;
        document.getElementById("studentTable").innerHTML += 
        newStudent;
        document.getElementById("firstName").value = "";
        document.getElementById("lastName").value = "";
        document.getElementById("grade").value = "";
        document.getElementById("email").value = "";
    }

    function editStudent(val)
    {
        document.getElementById("firstName").value =    
        document.getElementById(
        "fn_" + val).innerHTML;
        document.getElementById("lastName").value = 
        document.getElementById(
        "ln_" + val).innerHTML;
        document.getElementById("grade").value = 
        document.getElementById(
        "gr_" + val).innerHTML;
        document.getElementById("email").value = 
        document.getElementById(
        "em_" + val).innerHTML;

        document.getElementById("btnEditUpdate").onclick = function 
        () {
        updateStudent(val);
        };void 0;  
        document.getElementById("btnEditUpdate").innerHTML = 
        "Update";
    }
    function updateStudent(val) 
    {
        document.getElementById("fn_" + val).innerHTML = 
        document.getElementById(
        "firstName").value;
        document.getElementById("ln_" + val).innerHTML = 
        document.getElementById(
        "lastName").value;
        document.getElementById("gr_" + val).innerHTML = 
        document.getElementById(
        "grade").value;
        document.getElementById("em_" + val).innerHTML = 
        document.getElementById(
        "email").value;
        document.getElementById("firstName").value = "";
        document.getElementById("lastName").value = "";
        document.getElementById("grade").value = "";
        document.getElementById("email").value = "";
        document.getElementById("btnEditUpdate").onclick = function ()             
        {
           insertStudent();
        };
        document.getElementById("btnEditUpdate").innerHTML = 
        "Insert";
    }