在不同情况下如何在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

您可以直接将<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 2

您将需要将编辑和删除链接添加到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 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> 

由于创建了运行时，因此为您的“编辑”和“删除”链接添加了事件处理。