单击行的动态表仅在TR中提交隐藏值



i具有使用PHP和HTML的动态表排。

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

这是每行循环的,并且是在回声语句中。基本上正常工作。关于如何解决这个问题的任何想法。我可以解决这个问题。关于我如何做的任何解决方案都非常感谢。

谢谢

将您的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>

相关内容

  • 没有找到相关文章

最新更新