Question

你好我用js.now动态创建了按钮我需要在html表标签帮助中使用这些按钮显示在表格格式中

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>

Answer 1

问题是你要删除整个元素<div class="hr">
所以我们也把它里面的桌子移开了，
相反，我们必须删除可由#hr

标识的按钮

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，你可以在这里保存一个变量赋值：

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>

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

2 个答案: