Javascript 单击行时动态表仅提交tr中的隐藏值_Javascript_Php_Jquery_Html

Javascript 单击行时动态表仅提交tr中的隐藏值

javascript php jquery html

Javascript 单击行时动态表仅提交tr中的隐藏值,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个使用php和html的动态表，可以点击，点击表单中的表提交，并使用post方法发布特定行的两个变量我使用jquery创建了一个javascript，例如form.submit（），但这里的问题是，每当我单击表中的任何行时，它只解析最后一行的值我如何解决这个问题代码如下所示： '<tr onclick="submit()"><td><input type="hidden" name="a" value='.$a.' /><input type

我有一个使用php和html的动态表，可以点击，点击表单中的表提交，并使用post方法发布特定行的两个变量

我使用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>';

“.$aid.”；

这是针对每一行的循环，它位于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);
}

“.$aid.”；
功能提交（el）{
var es=$（el.find（“[name=a]”）val（）；
警报；
}


登记表
var表；
函数检查（）
{
调试器；
如果（！namevalidation（））
返回false；
如果（！agevalidation（））
返回false；
如果（！numbervalidation（））
返回false；
如果（！emailvalidation（））
返回false；
如果（！statevalidation（））
返回false；
如果（！gendervalidation（））
返回false；
if（document.getElementById（“数据”）==null）
createTable（）；
否则{
emailsearch（）；
}
返回true；
}
//函数检查（）{
//var结果=真；
//如果（！namevalidation（））
//结果=假；
//如果（！agevalidation（））
//结果=假；
//如果（！numbervalidation（））
//结果=假；
//如果（！emailvalidation（））
//结果=假；
//如果（！statevalidation（））
//结果=假；
//如果（！gendervalidation（））
//结果=假；
//如果（结果==真）{
//if（document.getElementById（“数据”）==null）
//createTable（）；
//否则{
//emailsearch（）；
//        }
//返回true；
//    }
//}
函数名验证（）{
var name=document.myfile.name.value；
如果（名称==“”| |名称==null）{
//警告（“请输入您的姓名”）；
document.getElementById（“span1”）.innerHTML=“请输入您的姓名”；
document.getElementById（“namedetail”）.style.border=“1px实心红色”；
document.myfile.name.focus（）；
返回false；
}
如果（！isNaN（名称））{
//警报（“请输入有效名称”）；
document.getElementById（“span1”）.innerHTML=“请输入有效名称”；
document.getElementById（“namedetail”）.style.border=“1px实心红色”；
document.myfile.name.focus（）；
返回false；
}
document.getElementById（“span1”）.innerHTML=“”；
document.getElementById（“namedetail”）.style.border=“1px纯绿色”；
返回true；
}
函数agevalidation（）{
var age=document.myfile.age.value；
如果（年龄=“”| |年龄==null）{
//提醒（“请输入您的年龄”）；
document.getElementById（“span2”）.innerHTML=“请输入您的年龄”；
document.getElementById（“agedetail”）.style.border=“1px实心红色”；
document.myfile.age.focus（）；
返回false；
}
否则，如果（年龄<18岁| |年龄>60岁）{
//警惕（“年龄不能低于18岁，也不能超过60岁”）；
document.getElementById（“span2”）.innerHTML=“年龄不能小于18岁，也不能大于60岁”；
document.getElementById（“agedetail”）.style.border=“1px实心红色”；
document.myfile.age.focus（）；
返回false；
}
document.getElementById（“span2”）.innerHTML=“”；
document.getElementById（“agedetail”）.style.border=“1px纯绿色”；
返回true；
}
函数numbervalidation（）{
var number=document.myfile.number.value；
如果（数字==“”| |数字==null）{
//提醒（“请输入您的号码”）；
document.getElementById（“span3”）.innerHTML=“请输入有效数字”；
document.getElementById（“numberdetail”）.style.border=“1px实心红色”；
document.myfile.number.focus（）；
返回false；
}
否则如果（number.length！=10）{
//警报（“请输入有效数字”）；
document.getElementById（“span3”）.innerHTML=“请输入有效数字”；
document.getElementById（“numberdetail”）.style.border=“1px实心红色”；
document.myfile.number.focus（）；
返回false；
}
document.getElementById（“span3”）.innerHTML=“”；
document.getElementById（“numberdetail”）.style.border=“1px纯绿色”；
返回true；
}
函数验证（）{
调试器；
var email=document.myfile.email.value；
var emailformat=/^[a-zA-z0-9.\]*\@[a-zA-Z]*\.[a-zA-Z]{1,5}$/；
如果（email==null | | email==“”）{
//警报（“请输入您的电子邮件ID”）；
document.getElementById（“span4”）.innerHTML=“请输入您的电子邮件ID”；
document.getElementById（“emaildetail”）.style.border=“1px实心红色”；
document.myfile.email.focus（）；
返回false；
}
如果（！emailformat.tes
<!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>