-2
我們可以檢查滾動編號是否已經存在與否。如何使用javascript檢查表格是否存在相同的滾動編號
用JavaScript
我們可以驗證此
與輥數量存在一個警告消息顯示，如果它是 已經在表中
。
window.onload = function() {
document.getElementById('new').style.display = 'none';
};
function addtable(){
\t document.getElementById('new').style.display = 'block';
Rollno = document.getElementById("roll_number");
Name = document.getElementById("student_name");
Class = document.getElementById("class");
var Gender = null;
var inputElements = document.getElementsByClassName('gender');
for (var i = 0; inputElements[i]; ++i) {
if(inputElements[i].checked){
Gender = inputElements[i].value;
break;
}
};
Age = document.getElementById("age");
Phone = document.getElementById("phone_number");
var Result = null;
\t var inputElements = document.getElementsByClassName('result');
\t for(var i=0; inputElements[i]; ++i){
\t if(inputElements[i].checked){
\t Result = inputElements[i].value;
\t break;
\t }
\t };
var table = document.getElementById("new");
rowCount = table.rows.length;
row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= Rollno.value;
row.insertCell(1).innerHTML= Name.value;
row.insertCell(2).innerHTML= Class.value;
row.insertCell(3).innerHTML= Gender;
row.insertCell(4).innerHTML= Age.value;
row.insertCell(5).innerHTML= Phone.value;
row.insertCell(6).innerHTML= Result;
row.insertCell(7).innerHTML='<input type="submit" value = "Delete" onclick="deleteRow(this)">';
var roll = document.forms["student_detail"]["roll_number"].value;
if (roll == "") {
alert("Rollno must be filled out");
return false;
}
var name = document.forms["student_detail"]["student_name"].value;
if (name == ""){
alert("Name must be filled out");
return false;
}
var clas = document.forms["student_detail"]["class"].value;
if (clas == "") {
alert("select the class");
return false;
}
var age = document.forms["student_detail"]["age"].value;
if (age == ""){
alert("Age must be filled out");
return false;
}
var phone = document.forms["student_detail"]["phone_number"].value;
if (phone == "") {
alert("Phone number must be filled out");
return false;
}
if (document.student_detail.result1.checked == true && document.student_detail.result2.checked == true){
alert('Select any one result');
return false ;
}
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("new");
table.deleteRow(index);
}
function myFunction() {
var x = document.getElementById('myTable');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
var change = document.getElementById("toggle");
if (change.innerHTML === "Hide Form")
{
change.innerHTML = "Show Form";
}
else {
change.innerHTML = "Hide Form";
}
}
function hideElem(){
document.getElementById('new').style.visibility = "hidden";
}
function showElem(){
document.getElementById('new').style.visibility = "visible";
}.abc table{
\t width: 100%;
\t border-collapse: collapse;
}
.abc table th{
border: 1px solid #000;
}
.abc table td{
border: 1px solid #000;
}
h2{
color: black;
text-shadow: 2px 2px 8px #FF0000
}
input[type=text],select,input[type=number]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<form name="student_detail" method="post" action="#" onsubmit="return addtable();">
<table id="myTable" >
<tr>
<td><h2>School Management Application</h2></td>
</tr>
<tr>
<td><label for="roll_number">Roll no</label></td>
<td><input type="text" id="roll_number" name="roll_number" placeholder="Roll Number"></td>
</tr>
<tr>
<td><label for="student_name">Student name</label></td>
<td><input type="text" id="student_name" name="student_name" placeholder="Student Name"></td>
</tr>
<tr>
<td><label for="class">Class</label></td>
<td><select name="class" id="class">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><input type="radio" class="gender" name="gender" value="male">Male
<input type="radio" class="gender" name="gender" value="female">Female</td>
</tr>
<tr>
<td><label for="age">Age</label></td>
<td><input type="number" id="age" name="age" placeholder="Age"></td>
</tr>
<tr>
<td><label for="phone_number">Phone number</label></td>
<td><input type="text" id="phone_number" name="phone_number" placeholder="Phone Number"></td>
</tr>
<tr>
<td><label>Result</label></td>
<td><input type="checkbox" class="result" name="result1" value="passed" >Passed
<input type="checkbox" class="result" name="result2" value="failed" />Failed</td>
</tr>
<tr>
<td><input type="button" value="Submit" onclick="addtable()"></td>
</tr>
</table>
</form>
<table>
<tr>
<td><input type="button" value="Hide Form" id="toggle" onclick="myFunction()">
<input type="button" value="Hide table" id="tab" onclick="hideElem()">
<input type="button" value="Show table" id="tab1" onclick="showElem()"></td>
</tr>
</table>
<div class="abc">
\t <table id="new">
<tr>
<th>Rollno</th>
\t <th>Student name</th>
\t <th>Class</th>
\t <th>Gender</th>
\t <th>Age</th>
\t <th>Phone number</th>
\t <th>Result</th>
\t </tr>
</table>
</div>
需要的，如果同樣的卷號進入again.After submiting而且要顯示
一個警告消息的任何一個可以幫助我這樣做是爲了得到警報
問題很少。而不是傾倒所有的代碼在這裏，請[創建一個完整的和最小的例子]（https://stackoverflow.com/help/mcve） – bugwheels94
不要試圖粗魯，但你應該能夠回答*「我們可以驗證這個「*你自己。我們寧願看到您的嘗試（注意@ ankitbug94所說的）與您遇到的問題的具體問題 - 如果有的話。 – domsson