Adding buttons created in js to the table in html

Question

hello i have created buttons dynamically using js.now i need these buttons to be presented inside a table format with in the html table tag help pls

function funchr()
{   
	$( ".hr" ).remove();
	
	var btn = document.createElement("BUTTON");      
    var t = document.createTextNode("VIEW PROFILE");      
    btn.appendChild(t);                                
    btn.setAttribute("id","viewid");
    btn.setAttribute("class","vp");
    document.body.appendChild(btn);
    
    var btn = document.createElement("BUTTON");        
    var t = document.createTextNode("EMPLOYEE DIRECTORY");       
    btn.appendChild(t);                               
    btn.setAttribute("id","empdir");
    btn.setAttribute("class","ed");
    document.body.appendChild(btn);
    
    var btn = document.createElement("BUTTON");        
    var t = document.createTextNode("CREATE ABSENCE");       
    btn.appendChild(t);                                
    btn.setAttribute("id","crabs");
    btn.setAttribute("class","ca");
    document.body.appendChild(btn);
  }

<div class="hr">
<input type="button" id="hr" class="hrButton" value="HR" onclick="funchr();" />
<table id="hrtable"> </table>

need in js . i have used jquery for some parts actually its a large program and i have posted here a single module — Vikram Srinivasan
– Vikram Srinivasan, Commented Nov 12, 2015 at 8:26
@VikramSrinivasan how many lines would it have in your table? Or just 3 simple buttons? — Tree Nguyen
– Tree Nguyen, Commented Nov 12, 2015 at 8:34

Tomáš Zato · Accepted Answer · 2015-11-12 08:40:00Z

1

First, you can really save yourself a variable assignment here:

button.appendChild(document.createTextNode("blah blah"));

Regarding the table, I advise to make a helper function. I will assume you want one button per table cell, though you didn't really bother explaining how you want the table to look:

function addButtonToTable(button, table) {
  var cell = document.createElement("td");
  // Get first row of table
  var row = table.rows[0];
  // Create new row if row doesn't exist
  if(!row) {
    row = document.createElement("row");
    table.appendChild(row);
  }
  // Add button to table cell
  cell.appendChild(button);
  row.appendChild(cell);
}
// Your old function
function funchr()
{   
    // Remove hrdiv
    var div = document.getElementById("hr");
    div.parentNode.removeChild(div);
    // Get table
	var table = document.getElementById("hrtable");
	
	var btn = document.createElement("BUTTON");       
    btn.appendChild(document.createTextNode("VIEW PROFILE"));                                
    btn.setAttribute("id","viewid");
    btn.setAttribute("class","vp");
    addButtonToTable(btn, table);
    
    btn = document.createElement("BUTTON");        
    btn.appendChild(document.createTextNode("EMPLOYEE DIRECTORY"));                               
    btn.setAttribute("id","empdir");
    btn.setAttribute("class","ed");
    addButtonToTable(btn, table);
    
    btn = document.createElement("BUTTON");        
    btn.appendChild(document.createTextNode("CREATE ABSENCE"));                                     
    btn.setAttribute("id","crabs");
    btn.setAttribute("class","ca");
    addButtonToTable(btn, table);
}
// This is just JSFiddle thing, remove it in your page
window.funchr = funchr;

<input type="button" id="hr" class="hrButton" value="HR" onclick="funchr();" />
<table id="hrtable"> </table>

answered Nov 12, 2015 at 8:40

Tomáš Zato

54k63 gold badges317 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vikram Srinivasan Over a year ago

thank you @Tomas and what changes to do for 3 rows and 3 columns as i have 9 buttons

Tomáš Zato Over a year ago

@VikramSrinivasan Why didn't you post that in your question? Why are you intentionally making it harder for others to help you? If there's multiple rows you will have to reference each row by id. I am not editing this answer, it's correct answer to your question, next time ask question correctly.

Vikram Srinivasan Over a year ago

sorry man i was creating for a large complex project and have forgot it

Sasidhar Boddeti · Accepted Answer · 2015-11-12 08:56:33Z

0

The problem is you are deleting the whole element <div class="hr">
so we are removing the table inside it too,
instead we have to remove the button which can be identified by #hr

function funchr()
{   
	$( "#hr" ).remove();
	var table = document.getElementById("hrtable");
    var row = table.insertRow(0);
    
  
	var btn = document.createElement("BUTTON");      
    var t = document.createTextNode("VIEW PROFILE");      
    btn.appendChild(t);                                
    btn.setAttribute("id","viewid");
    btn.setAttribute("class","vp");
    var cell1 = row.insertCell(0);
    cell1.appendChild(btn);
    
    td = document.createElement("td")
    var btn = document.createElement("BUTTON");        
    var t = document.createTextNode("EMPLOYEE DIRECTORY");       
    btn.appendChild(t);                               
    btn.setAttribute("id","empdir");
    btn.setAttribute("class","ed");
    var cell2 = row.insertCell(1);
    cell2.appendChild(btn);
  
    td = document.createElement("td")
    var btn = document.createElement("BUTTON");        
    var t = document.createTextNode("CREATE ABSENCE");       
    btn.appendChild(t);                                
    btn.setAttribute("id","crabs");
    btn.setAttribute("class","ca");
    var cell3 = row.insertCell(2);
    cell3.appendChild(btn);
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hr">
<input type="button" id="hr" class="hrButton" value="HR" onclick="funchr();" />
<table id="hrtable"> </table>

edited Nov 12, 2015 at 8:56

answered Nov 12, 2015 at 8:27

Sasidhar Boddeti

1,2141 gold badge11 silver badges22 bronze badges

4 Comments

Tomáš Zato Over a year ago

How does this add buttons to the table as OP requested?

Vikram Srinivasan Over a year ago

where is adding these buttons to the table

Tomáš Zato Over a year ago

@VikramSrinivasan I understood your question. It's pretty clear actually.

Sasidhar Boddeti Over a year ago

sorry @VikramSrinivasan you were clear will edit the answer now

Collectives™ on Stack Overflow

Adding buttons created in js to the table in html

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related