如何使用createElement()添加具有多个类型属性的表?

时间:2018-10-22 17:48:32

标签: javascript html css

function generatetable(){
        var x = document.createElement("table");
        x.setAttribute("id","mytable");
        document.body.appendChild(x);
        var y = document.createElement("TR");
        y.setAttribute("id","mytr");
        document.getElementById("mytable").appendChild(y);
        var z = document.createElement("TD");
        var t = document.createTextNode("cell");
        z.appendChild(t);
        document.getElementById("mytr").appendChild(z);}

**我要显示的输出为(最后日期,2018年12月20日),(公司名称,xyz),(职位空缺,89),(城市位置,纽约) 以表格格式,该怎么做?我想在段落下添加它。当您在表单中添加字段并点击提交按钮时,它会显示一个paraghraph。现在,我想按上述表格格式显示相同的信息,在我点击“提交”按钮时出现的第二页上。我想添加此函数generatetable()在第二页上创建一个表。怎么做 **

        <script type="text/javascript">
          function generatesentence(){
            var var1 = document.getElementById('orgname');
            var var2 = document.getElementById('postionnumber');
            var var3 = document.getElementById('nameofpostions');
            var str  = " bharti 2018"
            var strsres1 = var1.value+str;
            var link1 = strsres1.link(document.getElementById('linkmoredetails').value);
            var strsres2 = "pdf ";
            var link2 = strsres2.link(document.getElementById('pdflink').value);
            var var4 = document.getElementById('cityname');
            var var5 = document.getElementById('lasdat');
            document.write(var1.value+' Published Recruitment notification. Recruitment of Contractual Posts for the posts of '
                            +var3.value+' etc for the period of 11 Months. There are total '
                            +var2.value+' vacancies.The location is'
                            +var4.value+ ' Eligible applicants can apply online from the below online apply link. Last date of application is '
                            +var5.value+'. For more details of '
                            +link1+' like Vacancy details, Age Limit, Qualification and how to apply process for that candidate need to go through this page:');
            table = document.createElement('table');
            }

        </script>
<style>
body{
  background-image: url("ORGANIZATIONALRE-ORGANIZATIONOR.jpg");
}


.organization-information{
  width: 360px;
  padding:15% 0 0;
  margin: auto;
}
 .form{
  position: relative;
  z-index: 1;
  background: LightBlue	;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
 }

.form input{
  font-family: "roboto", sans-serif;
  outline: 1;
  background: #F5F5F5;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form-button{
  font-family: "roboto0",sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: inherit;
  font-size: 14px;
}

.concat{
  position: relative;
  z-index: 1;
  background: LightBlue	;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
}
</style>
<!doctype html>
<html>
  <head>
    <title>Vacancies Available</title>
  </head>
  <body>
    <div class="organization-information">
    <div class="form">
        <form class="Org-info-form">
      name of organization:          <input type="text" id="orgname" placeholder="enter the name here"/><br/>
      No of positions  :             <input type="number" id="postionnumber" placeholder="Enter number of positions avaialble"/><br/>
      Name of positions  :           <input type="text" id="nameofpostions" placeholder="Enter the postions seperated by , or / "/><br/>
      City Name           :          <input type="text" id="cityname" placeholder="Enter city name here"/><br/>
      Last Date for application :    <input type="date" id="lasdat" placeholder="Last date of application"/><br/>
      Link for further details :     <input type="url" id="linkmoredetails" placeholder="Enter a link for detailed information"/><br/>
      Link pdf of details :          <input type="url" id="pdflink" placeholder="Enter the link for pdf"/><br/>
                                     <button onclick="generatesentence('orgname','nameofpostions','postionnumber','cityname','lasdat')">Submit</button>
        </form>
     </div>
     </div>
    </body>
</html>

0 个答案:

没有答案