我有一個動態表使用php和html可以點擊，然後點擊表格中的表格提交併使用post方法它發佈了兩個屬於特定行的變量。點擊行動態表提交tr內的隱藏值只有
我已經使用jQuery創建了一個JavaScript例如form.submit（），但這裏的問題是，只要我點擊表上的任何行，它就只解析最後一行的值。
我該如何解決這個問題？
的代碼看起來是這樣的：
'<tr onclick="submit()"><td><input type="hidden" name="a" value='.$a.' /><input type="hidden" name="b" value='.$b.' />'.$aid.'</td></tr>';
這是循環的每一行，它是在一個echo語句。它基本上工作正常。我如何解決這個問題的任何想法。我可以解決這個問題。我非常感謝任何解決方案。
謝謝
你的HTML改爲：
'<tr onclick="submit(this)"><td><input type="hidden" name="a" value='.$a.' /><input type="hidden" name="b" value='.$b.' />'.$aid.'</td></tr>';
function submit(el) {
var es = $(el).find("[name=a]").val();
alert(es);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration Form</title>
<script>
var table;
function check()
{
debugger;
if (!namevalidation())
return false;
if (!agevalidation())
return false;
if (!numbervalidation())
return false;
if (!emailvalidation())
return false;
if (!statevalidation())
return false;
if (!gendervalidation())
return false;
if (document.getElementById("data") == null)
createTable();
else {
emailsearch();
}
return true;
}
//function check() {
// var result = true;
// if (!namevalidation())
// result = false;
// if (!agevalidation())
// result = false;
// if (!numbervalidation())
// result = false;
// if (!emailvalidation())
// result = false;
// if (!statevalidation())
// result = false;
// if (!gendervalidation())
// result = false;
// if (result == true) {
// if (document.getElementById("data") == null)
// createTable();
// else {
// emailsearch();
// }
// return true;
// }
//}
function namevalidation() {
var name = document.myfile.name.value;
if (name == "" || name == null) {
// alert("Please enter your Name");
document.getElementById("span1").innerHTML = "Please enter your Name";
document.getElementById("namedetail").style.border = "1px solid red";
document.myfile.name.focus();
return false;
}
else if (!isNaN(name)) {
// alert("Please enter a valid Name");
document.getElementById("span1").innerHTML = "Please enter a valid Name";
document.getElementById("namedetail").style.border = "1px solid red";
document.myfile.name.focus();
return false;
}
document.getElementById("span1").innerHTML = "";
document.getElementById("namedetail").style.border = "1px solid green";
return true;
}
function agevalidation() {
var age = document.myfile.age.value;
if (age == "" || age == null) {
//alert("Please enter your Age");
document.getElementById("span2").innerHTML = "Please enter your Age";
document.getElementById("agedetail").style.border = "1px solid red";
document.myfile.age.focus();
return false;
}
else if (age < 18 || age > 60) {
//alert("Age can't be less than 18 and more than 60");
document.getElementById("span2").innerHTML = "Age can't be less than 18 and more than 60";
document.getElementById("agedetail").style.border = "1px solid red";
document.myfile.age.focus();
return false;
}
document.getElementById("span2").innerHTML = "";
document.getElementById("agedetail").style.border = "1px solid green";
return true;
}
function numbervalidation() {
var number = document.myfile.number.value;
if (number == "" || number == null) {
//alert("Please enter your number");
document.getElementById("span3").innerHTML = "Please enter a valid number";
document.getElementById("numberdetail").style.border = "1px solid red";
document.myfile.number.focus();
return false;
}
else if (number.length != 10) {
//alert("Please enter a valid number");
document.getElementById("span3").innerHTML = "Please enter a valid number";
document.getElementById("numberdetail").style.border = "1px solid red";
document.myfile.number.focus();
return false;
}
document.getElementById("span3").innerHTML = "";
document.getElementById("numberdetail").style.border = "1px solid green";
return true;
}
function emailvalidation() {
debugger;
var email = document.myfile.email.value;
var emailformat = /^[a-zA-z0-9._]*\@[a-zA-Z]*\.[A-Za-z]{1,5}$/;
if (email == null || email == "") {
//alert("Please enter your E-Mail ID");
document.getElementById("span4").innerHTML = "Please enter your E-Mail ID";
document.getElementById("emaildetail").style.border = "1px solid red";
document.myfile.email.focus();
return false;
}
else if (!emailformat.test(email)) {
//alert("Invalid Format")
document.getElementById("span4").innerHTML = "Invalid Format";
document.getElementById("emaildetail").style.border = "1px solid red";
document.myfile.email.focus();
return false;
}
document.getElementById("span4").innerHTML = "";
document.getElementById("emaildetail").style.border = "1px solid green";
return true;
}
function statevalidation() {
var state = document.myfile.statedetail.value;
if (state == -1) {
//alert("Please select your State");
document.getElementById("span5").innerHTML = "Please select your State";
document.getElementById("statedetail").style.border = "1px solid red";
document.myfile.statedetail.focus();
return false;
}
document.getElementById("span5").innerHTML = "";
return true;
}
function gendervalidation() {
debugger;
var gender = document.myfile.gender.value;
if (gender != "Male" && gender != "Female") {
//alert("Please select your Gender");
document.getElementById("span6").innerHTML = "Please select your Gender";
return false;
}
document.getElementById("span6").innerHTML = "";
return true;
}
//function isnumber(element)
//{
// var value= element.value;
// if (isNaN(element.value))
// {
// var length = element.value.length;
// var newvalue = element.value.substring(0, length - 1);
// element.value = newvalue;
// element.focus();
// return false;
// }
// return true;
//}
function createTable() {
var myTableDiv = document.getElementById("datatable"); //indiv
table = document.createElement("TABLE"); //TABLE??
table.setAttribute("id", "data");
table.border = '1';
myTableDiv.appendChild(table); //appendChild() insert it in the document (table --> myTableDiv)
debugger;
var header = table.createTHead();
var th0 = table.tHead.appendChild(document.createElement("th"));
th0.innerHTML = "Name";
var th1 = table.tHead.appendChild(document.createElement("th"));
th1.innerHTML = "Age";
var th2 = table.tHead.appendChild(document.createElement("th"));
th2.innerHTML = "E-MAIL ID";
var th3 = table.tHead.appendChild(document.createElement("th"));
th3.innerHTML = "Number";
var th4 = table.tHead.appendChild(document.createElement("th"));
th4.innerHTML = "State";
var th5 = table.tHead.appendChild(document.createElement("th"));
th5.innerHTML = "Gender";
appendRow();
}
function appendRow() {
var name = document.myfile.name.value;
var age = document.myfile.age.value;
var email = document.myfile.email.value;
var number = document.myfile.number.value;
debugger;
var statetext = document.getElementById("statedetail");
var selectedtext = statetext.options[statetext.selectedIndex].text;
var gender = document.myfile.gender.value;
var rowCount = table.rows.length; //
var row = table.insertRow(rowCount); //
row.insertCell(0).innerHTML = name; //insertCell() inserts a new cell in the current row
row.insertCell(1).innerHTML = age;
row.insertCell(2).innerHTML = email;
row.insertCell(3).innerHTML = number;
row.insertCell(4).innerHTML = selectedtext;
row.insertCell(5).innerHTML = gender;
row.insertCell(6).innerHTML = '<input type="button" value = "Delete" onClick="deleteRow(this);">';
row.insertCell(7).innerHTML = '<input type="button" value = "EDIT" onclick="changeContent(this);">';
clearForm();
}
function clearForm() {
debugger;
document.myfile.name.value = "";
document.myfile.age.value = "";
document.myfile.email.value = "";
document.myfile.number.value = "";
// document.myfile.state.value = document.getElementById('statedetail').selectedIndex = -1;
}
function deleteRow(obj) {
debugger;
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("data");
table.deleteRow(index);
}
function changeContent(obj)
{
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("data");
table.deleteRow(index);
var row = obj.parentNode.parentNode;
document.myfile.name.value = row.childNodes[0].innerHTML;
document.myfile.age.value = row.childNodes[1].innerHTML;
document.myfile.email.value = row.childNodes[2].innerHTML;
document.myfile.number.value = row.childNodes[3].innerHTML;
var statetext = document.getElementById("statedetail");
var selectedtext = statetext.options[statetext.selectedIndex].text;
selectedtext = row.childNodes[4].innerHTML
}
//function emailsearch() {
// var myTable = document.getElementById('data').tBodies[0];
// // first loop for each row
// for (var r = 0, n = myTable.rows.length; r < n; r++) {
// // this loop is getting each colomn/cells
// for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {
// if (myTable.rows[r].cells[c].childNodes[0].value) {
// // get email id
// var emailidinput = myTable.rows[r].cells[2].innerHTML;
// alert(emailidinput);
// var rowCount = table.rows.length;
// for (var i = 0; i = rowCount; i++) {
// var emailidarray = [];
// emailidarray[i] = emailidinput;
// }
// }
// }
// }
// //var email = document.myfile.email.value;
// //var a = emailidarray.indexOf(email);
// //if (a != -1) {
// // document.getElementById("emailspan").innerHTML = "EMAIL ID ALREADY EXISTS";
// // clearForm();
// //}
//}
function emailsearch() {
debugger;
var eml = document.getElementById("emaildetail").value;
var table = document.getElementById("data");
var length = table.rows.length;
if (table.rows.length != null) {
for (var i = 0; i < table.rows.length; i++) {
// for (var j = 0; j < table.rows[i].cells.length; j++) {
if (eml == table.rows[i].cells[2].innerHTML) {
// check = false;
//alert("Same Email is already Exist.");
document.getElementById("span4").innerHTML = "Same Email is already Exist.";
clearForm();
deleteRow();
break;
// }
// else {
// check = true;
// document.getElementById("data").style.display = "block";
// appendRow();
}
// }
}
appendRow();
}
}
</script>
</head>
<body>
<div>
<form name="myfile">
<table id="tableid">
<tr>
<th>Name</th>
<td><input type="text" name="name" id="namedetail" /></td>
<td><span id="span1"></span></td>
</tr>
<tr>
<th>Age</th>
<!--<td><input type="text" onkeyup="isnumber(document.myfile.age)" name="age" id="agedetail" /></td>-->
<td><input type="text"
onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"
name="age" id="agedetail" /></td>
<td><span id="span2"></span></td>
</tr>
<tr>
<th>Phone Number</th>
<!--<td><input type="text" onkeyup="isnumber(document.myfile.number)" name="number" id="numberdetail" /></td>-->
<td><input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"
name="number" id="numberdetail" /></td>
<!--event.charCode= returns ascii value, === equal value and equal type,
\D metacharacter is used to find a non-digit character-->
<td><span id="span3"></span></td>
</tr>
<tr>
<th>E-Mail ID</th>
<td><input type="text" name="email" id="emaildetail" /></td>
<td><span id="span4"></span></td>
</tr>
<tr>
<th>State</th>
<td>
<select name="statedetail" id="statedetail">
<option value="-1">Select</option>
<option value="1">Andhra Pradesh</option>
<option value="2">Bihar</option>
<option value="3">Goa</option>
<option value="4">Delhi</option>
<option value="5">Haryana</option>
<option value="6">Himachal Pradesh</option>
</select>
</td>
<td><span id="span5"></span></td>
</tr>
<tr>
<th>Gender</th>
<td><input type="radio" name="gender" value="Male" />Male</td>
<td><input type="radio" name="gender" value="Female" />Female</td>
<td><span id="span6"></span></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" onclick="check();" /></td>
<td><input type="reset" name="Reset" /></td>
</tr>
</table>
</form>
<div id="datatable">
</div>
</div>
</body>
</html>
做你的行具有相同的名稱？如果是這樣，只有最後發佈的內容會被訪問...每個輸入需要一個不同的名稱。 a1，a2，a3爲例。 – Blunderfest
您需要使用'submit（this）'，然後重新編寫'submit（）'函數來查找相對於參數的元素。 – Barmar
@barmar非常感謝你的建議。那麼我能通過引用輸入類型的名稱來找到這些值嗎？ – urhydy