Question

您好我正在努力为自己做一个简单的练习，但我无法为我的项目找到解决方案。

我试图将输入值放在带有计数的表格中。问题是我想创建5＆＃34; td＆＃34;在我创建的＆＃34; tr＆＃34;但我只能添加一个。

是否有人知道实现这一目标的最佳方法？

＆＃13;

MultiResourcePartitioner

＆＃13;

var btn = document.getElementById("btn");
var table = document.getElementById("table");

var removeRowBtn = document.getElementById("removeRowBtn");
var tableNr = document.getElementById("tableNr");

// input fields Variable
var firstName = document.myForm.firstName.value;
var lastName = document.myForm.lastName.value;
var Age  = document.myForm.Age.value;
var Country = document.myForm.Country.value;

btn.onclick = function(){ addData()};

// this function is checking if the input fields have the recuired data in it other wise it give's a error.
function validate() {
    // first name field check + error
     if( document.myForm.firstName.value == "" ) {
        alert( "Please provide your first name!" );
        document.myForm.firstName.focus() ;
        return false;
     }
     // last name field check + error message
     if( document.myForm.lastName.value == "" ) {
        alert( "Please provide your last name!" );
        document.myForm.lastName.focus() ;
        return false;
     }
     // age field check + error message
     if(  isNaN(document.myForm.Age.value) || document.myForm.Age.value < 1 || document.myForm.Age.value > 100 ){
        alert( "Please provide your age!");
        return false;
     }
     // country select list check + error message
     if( document.myForm.Country.value == "chooseCountry" ) {
        alert( "Please provide your country!" );
        return false;
     }
     // if evry thing is true return a value of true
       return true;
}


function addData() {

  if( validate() ){
    // creating a new tr 
    var tr = document.createElement("tr");
    // create a new td
    var td = document.createElement("td");
    
    // adding the created elements to a object with a class name
    table.appendChild(tr);
    tr.appendChild(td).classList.add("numberOutput");
    tr.appendChild(td).classList.add("firstNameOutput");
    tr.appendChild(td).classList.add("lastNameOutput");
    tr.appendChild(td).classList.add("ageOutput");
    tr.appendChild(td).classList.add("countryOutput");


  }

}

＆＃13;

body{
  background: white;
}
img{
  height: 100%;
  display: block;
  margin: 0 auto;
}
p{
  text-align: center;
}
.container{
  width: 100%;
  max-width: 600px;
  border-radius: 2px;

  margin: 0 auto;
  margin-top: 8vh;

  background: lightgray;
  box-shadow: 0px 4px 4px darkgray;
}


table{
  width: 100%;
  text-align: center;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}





/* Button */

.btn {
  display: inline-block;
  margin: 1em auto;
  font-weight: 100;
  padding: 1em 1.25em;
  text-align: center;
  width: 100% ;
  border-radius: 1px;
  position: relative;
  z-index: 0;
  cursor: pointer;
  border: none;
  background: #0c84e4;
  box-shadow: 0px 1px 1px #063e6b;
  color: #FFFFFF;
}
:focus {
    outline: -webkit-focus-ring-color auto 0px;
}
.btn.red{
  background:red;
  width: 100%;
}


/* input field style's */

input[type=text] {
    width: calc(25% - 8px);
    padding: 12px 20px 12px 5px;
    margin: 8px 4px;
    box-sizing: border-box;
    float: left;
    border: none;
    border-bottom: 2px solid #536DFE;
    text-align: center;
    background: transparent;
}
input:focus{
  outline: none;
  color: black;
}
::-webkit-input-placeholder{
  color:black;
  font: helvetica 12px bold ;
  text-align: center;
}

select{
  width: calc(25% - 8px);
  padding: 12px 20px 12px 5px;
  margin: 8px 4px;
  box-sizing: border-box;
  float: left;
  border: none;
  border-bottom: 2px solid #536DFE;
  text-align: center;
  background: transparent;
  height: 39px;
  border-radius: 0px !important;
}

＆＃13;

Answer 1

你一直在添加相同的td ......

试试这个：

function addData() {

  if( validate() ){
    // creating a new tr 
    var tr = document.createElement("tr");

    // adding the created elements to a object with a class name
    table.appendChild(tr);
    tr.appendChild(document.createElement("td")).classList.add("numberOutput");
    tr.appendChild(document.createElement("td")).classList.add("firstNameOutput");
    tr.appendChild(document.createElement("td")).classList.add("lastNameOutput");
    tr.appendChild(document.createElement("td")).classList.add("ageOutput");
    tr.appendChild(document.createElement("td")).classList.add("countryOutput");


  }

}

Js表，将多个td添加到带有数据的tr

1 个答案: