如何在不同情况下在javascript中使用html表“td”元素？

Question

伙计们，我将开发一个简单的主代码来从用户那里获取数据并添加到表中。我已经完成了任务，但我需要问一些问题。

我想将我的操作元素（编辑|删除）也放在单元格中，就像输入的名字和姓氏一样。我知道如何使用“td”作为名字和姓，但我不知道如何在我的表的单元格中添加“td”元素（编辑|删除）

function AddStudents(event){

    var x = document.getElementById('fname').value ;
    var y = document.getElementById('lname').value ;

    console.log("LINE 1");

  var ftd = document.createElement('tr');
var ft = document.createElement('td');
var text = document.createTextNode(fname.value);

    ft.appendChild(text);

    console.log("LINE 2");

    var nt = document.createElement('td') ;
var text2 = document.createTextNode(lname.value);
    nt.appendChild(text2);


    var ot = document.createElement('a');
var neu = document.createElement('td') ;

    var od = document.createElement('a');
    var sp = document.createElement('a');

    ot.innerHTML = ' Edit' ;
    od.innerHTML = ' Delete';
    sp.innerHTML = ' | ' ;
    ot.href = "#" ;
    od.href = "#" ;


    console.log("LINE 3");

    ftd.appendChild(ft)
ftd.appendChild(nt)
    ftd.appendChild(ot)
    ftd.appendChild(sp)
    ftd.appendChild(od)

    console.log("LINE 4");

    document.getElementById("students").appendChild(ftd);
}

这是我的HTML代码：

<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
</br>
</br>
<button id="add" onclick="AddStudents(this)">Add Student</button>

<h3>List Of Students</h3>

<table id="students" cellpadding = "7px" text-align = "center"        border="1">

<thead>
<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Operation</td>
</tr>
<tbody></tbody>
</table>

Answer 1

您需要将编辑和删除链接添加到td，然后将td附加到表中。

为此，创建一个td元素，创建链接，为条形创建一个跨度，然后将链接和跨度附加到您的td。现在您有一个适当的表格单元格，您可以将其附加到表格中。

另外，我建议您使用更具描述性的变量名称，以便其他人更容易理解您的代码。看起来这可能是你的教授也能给你帮助的任务。

var td = document.createElement('td');
var editLink = document.createElement('a');
var deleteLink = document.createElement('a');
var span = document.createElement('span');

editLink.innerHTML = 'Edit';
editLink.href="#";

deleteLink.innerHTML = 'Delete';
deleteLink.href = "#";

span.innerHTML = '|';

td.appendChild(editLink);
td.appendChild(span);
td.appendChild(deleteLink);

下面是一些代码可以做到这一点，但要确保您理解为什么这会创建一个表格单元格，而不是仅仅复制粘贴它。

Answer 2

您可以直接将<button>放入<td>元素中：

<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
</br>
</br>
<button id="add" onclick="AddStudents(this)">Add Student</button>
<h3>List Of Students</h3>
<table id="students" cellpadding = "7px" text-align = "center" border="1">
   <thead>
      <tr>
         <td>First Name</td>
         <td>Last Name</td>
         <td>Operation</td>
         <td><button class="" id="btnEdit">Edit</button></td>
         <td><button class="" id="btnDelete">Delete</button></td>
      </tr>
   <tbody></tbody>
</table>

如果您正在使用Bootstrap之类的东西，那么您也可以输入我留下空引号的类，以按照您喜欢的方式设置按钮的样式。

Answer 3

您可以使用jQuery以更好的方式执行此操作

function AddStudents(){

 $("#notification").html('');
 var fname= $("#fname").val();
 var lname=$("#lname").val();
 if(fname!='' && lname!=''){
 
 $("#students tbody").append("<tr>");
 $("#students tbody").append("<td>"+fname+"</td>");
 $("#students tbody").append("<td>"+lname+"</td>");
 $("#students tbody").append("<td><a href='#' class='btnedit'>Edit</a> | <a href='#' class='btndelete'>Delete </a></td>");
 $("#students tbody").append("</tr>");
 }
 else{
 $("#notification").html('Please enter First Name and Last Name');
 }
}

$(document).on("click",".btnedit",function(){
//Implement Edit functionality here
alert('edit');
});

$(document).on ("click",".btndelete",function(){
//Implement delete functionality here
alert('delete');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='notification'></div>
    <input type="text" id="fname" placeholder="First Name">
    <input type="text" id="lname" placeholder="Last Name">
    </br>
    </br>
    <button id="add" onclick="AddStudents()">Add Student</button>

    <h3>List Of Students</h3>

    <table id="students" cellpadding = "7px" text-align = "center"        border="1">

    <thead>
    
    <tr>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Operation</td>
    </tr></thead>
    <tbody></tbody>
    </table>

I added event handling for your Edit and Delete links since it is created runtime.