how to use html table “td” element in javascript in different cases?

Question

guys, I am going to develop a simple primary code to get data from the user and add to the table. I have already done the mission but there is some problem I need to ask.

I want to put my operation element (Edit | Delete) also in a cell just like entered first name and last name. I know how to use "td" for first and last name but I dunno how to add "td" element to put (Edit | Delete) also in a cell of my table

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);
}

and this my html code :

<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

You can simply put a <button> in a <td> element directly:

<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>

If you're using something like Bootstrap then you can also enter classes where I left empty quotation marks to style the button how you'd like.

Answer 2

You will need to add the edit and delete links to a td and then append the td to your table.

To do this create a td element, create the links, create a span for the bar and then append the links and span to your td. Now you have a proper table cell which you can append to the table.

As an aside, I recommend you use more descriptive variable names so other people can understand your code easier. It looks like this is likely an assignment your professor would also be able to give you help.

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);

Here is some code which does that, but ensure you understand why this creates a table cell instead of just copy pasting it.

Answer 3

You can do this in a better way using 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.