Question

我有一个表格，要求提供有关员工，姓名，年龄，职位和详细信息的信息，然后在按下“添加记录”按钮时，必须将其添加到div中。

目前，我具有“对象构造器”设置，但是我对如何将详细信息推送到div以及应该如何编写函数来做到这一点有些迷惑，以前我使用Canvas来显示它。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Quicksand" 
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/employee_styles.css"/>
</head>
<body>
<div id="container">
    <header>
        <h1 id="heading" class="blueTxt">Employee Records</h1>
    </header>
    <div class="left">
    <form>
        <fieldset>
            <legend><h2>Employee Details Entry</h2></legend>            
            <p class=><label>Name: <input class="text" type="text" id="name" 
/></label></p>
            <p><label>Age: <input class="text" type="text" id="age" /> c 
</label></p>
            <p><label>Position: <input class="text" type="text" 
id="position" /></label></p>
            <p><label>Details: <textarea type="text" id="details" 
maxlength="114" ></textarea></label></p>                
            <input class="button" type="button" id="addRecord" onclick="" 
value="Add Record"/>
        </fieldset>
    </form>             

        <div class="sort">
            <h3>Sort</h3>
            <button class="button" id="sortByName">By Name</button>
            <button class="button" id="sortByAge">By Age</button>
            <br/><button class="button" id="reset">Reset Details</button>
            <br /><br />
        </div>
    </div>
    <section>
        <div id="employeeRecords">

        </div>
    </section>

 </div> 

 <script src="../js/employee_script.js"></script>
 </body>
  </html>


var employees = [];

和我的Javascript

 //------------------------------------------------------------------------- 
 -------------------------------------

 function Person(name, age, pos, dtls, img){

  this.fullName = name;
  this.employeeAge = age;
  this.position = pos;
  this.details = dtls;

  this.avatarSrc = img;

    this.createProfile = function(){
    var profile = document.createElement("div");
    profile.className = "profileStyle";
    var avatar = document.createElement("img");
    avatar.src = this.avatarSrc;
    avatar.alt = this.fullName();
    profile.appendChild(avatar);
    var profileTxt = document.createElement("p");
    profileTxt.innerHTML = "<b>" + this.fullName() +
    "</b><br />" + this.age + 
    "</b><br />" + this.pos + 
    "</b><br />" + this.dtls;
    profile.appendChild(profileTxt);
    return profile;
    }

 employees.push(this);


}




for(var i=0; i < staff.length; i++){
document.getElementById("staff_list").appendChild(staff[i].createProfile());

}


  //------------------------------------------------------------------------ 
 -----------------------------------



function compareNames(a, b){
var nameA = //TODO - needs to refer to the employee name
var nameB = //TODO - needs to refer to the employee name
var result = 0;
if (nameA < nameB){
    result = -1;
}
else if(nameA > nameB){
    result = 1;
}
return result;
 }


 //------------------------------------------------------------------------- 
  -------------------------------------

function sortName(){

}


//-------------------------------------------------------------------------- 
 ------------------------------------

 function sortAge(){

 }


 //------------------------------------------------------------------------- 
 -------------------------------------


function addRecord(){


}




 //------------------------------------------------------------------------- 
 -------------------------------------


 function writeRecords(){




 //------------------------------------------------------------------------- 
  ------------------------------------



 function resetArray(){

 }






//-------------------------------------------------------------------------- 
------------------------------------



 function arrayButtons(){

 }

Answer 1

您可以执行以下操作。

elements = document.getElementById("myForm").elements;
for (var i = 0; i < elements.length; i++) {
  var name = elements[i].name;
  var val = elements[i].value;
  name = name[0].toUpperCase() + name.slice(1);
  var dsply = document.getElementById("dsply");
  dsply.innerHTML += "<p>" + name + ": " + val + "</p>";
}

<form id="myForm" name="myForm">
  <p>Title of the form</p>
  <input type="text" name="user" value="Jon" />
  <input type="age" name="age" value="26" />
  <input type="text" name="pos" value="CEO" />
  <textarea name="details">Enter Details here</textarea>
</form>
<div id="dsply">
</div>

从HTML输入表单存储变量？

1 个答案: