添加按鈕動態使用js.now我需要這些按鈕

Question

你好，我已經創建了按鈕的表格式中的HTML表格標籤幫助下呈現請

function funchr() 
 
{ 
 
\t $(".hr").remove(); 
 
\t 
 
\t 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>

Answer 1

首先，你真的可以救自己變量賦值這裏：

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

關於表，我建議做一個輔助功能。我會假設你希望每個表格單元格一個按鈕，但你真的不打擾說明您希望表看：

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 
 
\t var table = document.getElementById("hrtable"); 
 
\t 
 
\t 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>

Answer 2

問題是要刪除的整個元素<div class="hr">
所以我們要刪除的表裏面也
相反，我們必須刪除可以通過識別按鈕

function funchr() 
 
{ 
 
\t $("#hr").remove(); 
 
\t var table = document.getElementById("hrtable"); 
 
    var row = table.insertRow(0); 
 
    
 
    
 
\t 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>