将js中创建的按钮添加到html中的表中

Adding buttons created in js to the table in html

本文关键字：html 添加按钮创建 js 更新时间：2023-09-26

你好，我已经使用js动态创建了按钮。现在我需要这些按钮以表格格式显示，并在html表格标签中帮助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>

首先，您可以在这里为自己保存一个变量赋值：

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

问题是您正在删除整个元素<div class="hr">
所以我们也要移除里面的桌子，
相反，我们必须移除可以通过#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>