1
こんにちは、私は自分のために簡単な運動をしようとしていますが、私のプロジェクトの解決策を見つけることができません。データを持つtrに複数のtdを追加する
私は、入力値をカウント番号のついたテーブルに配置しようとしています。 問題は私が作成した "tr"に5 "td"を作成したいのですが、1つしか追加できません。
これを達成する最善の方法を知っている人はいますか?あなたは同じtdのすべての時間を追加している
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");
}
}
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;
}
<!DOCTYPE html>
<html>
<head>
<title>Inzend Opgave H5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- style sheets -->
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="wrapper">
<section class="container">
<form id="personInfo" name="myForm">
<table>
<tbody id="table">
<tr>
<td>nr.</td>
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Country</td>
</tr>
</tbody>
</table>
<input type="text" name="firstName" placeholder="firstName">
<input type="text" name="lastName" placeholder="lastName">
<input type="text" name="Age" placeholder="Age">
<select name="Country">
<option value="choose a country">Kies een land</option>
<option value="Nederland">NL</option>
<option value="Belgie">BE</option>
<option value="Duitsland">DE</option>
</select>
<input type="button" name="button" id="btn" class="btn" value="Add the input fields to the table">
<p>To remove a table number fill in the input field with the <br> number of the table and click remove table row</p>
<input type="button" name="button" id="removeRowBtn" class="btn" value="remove table row" style="width: 75%;">
<input type="text" name="TableNr" id="tableNr" placeholder="table nr.">
</form>
</section>
</div>
<!-- java-scripts -->
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
var cw = $('.container').width();
$('.container').css({
'height': cw + 'px'
});
</script>
</body>
</html>
をあなたが唯一の 'のdocument.createElementを呼び出している(「TD ");一度。 – StephenWidom
'var $ tr = $( '
答えて
...
これを試してみてください。
出典
2017-05-03 16:28:22
はい、これはうまくいきますが、私はちょっと厄介なやり方があると思っていました。しかし、あなたの権利は完璧に働きます。ありがとう。 – mike
もっと厄介なのはjQueryを使用しているからです – mplungjan
関連する問題