Click here to Skip to main content
16,021,041 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Table is created dynamically then header is showing at the bottom of all row


also I am want to delete specific record from table for which I have provided delete button when clicking delete button some times it is deleting another row i.e randam row I dont know how is happening As I am new in javascript I dont know how to handle this situation

What I have tried:

My all code is as follows


<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid silver;
        }

        tr:nth-child(even) {
            background-color: #C0C0C0;
        }

        tr:nth-child(odd) {
            background-color: #808080;
        }

        table {
            height: 500px;
            overflow-y: scroll;
        }



        #header-fixed {
            position: fixed;
            top: 0px;
            display: none;
            background-color: white;
        }
    </style>
</head>
<body onload="myFunction()">

    <div>


        <div style="overflow:scroll;height:500px;width:100%;overflow:auto">

            <table id=tableData></table>
        </div>
    </div>
    <p id="demo"></p>
    <p id="demo1"></p>
    <script>


        function myFunction() {
            //var n = prompt("", "");

            var n = 12;
            n = parseInt(n);
            var table;
            document.getElementById("demo").innerHTML = n;
            if (n > 0) {
                var rowID = 0;

                table = document.createElement("TABLE");
                table.id = "attrtable";
                table.className = "attrtable";


                for (i = 0; i < n; i++) //
                {
                    if (i == 0) //
                    {
                        debugger
                          //alert('hi');

                        var header = table.createTHead();
                        // Create an empty <tr> element and add it to the first position of <thead>:
                        var row = header.insertRow(0);
                        // Insert a new cell (<td>) at the first position of the "new" <tr> element:
                        var cell = row.insertCell(0);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "Id";

                        var cell = row.insertCell(1);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "First Name";

                        var cell = row.insertCell(2);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "Last Name";

                        var cell = row.insertCell(3);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "Mobile No";

                        var cell = row.insertCell(4);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "Email Id";



                        var cell = row.insertCell(5);
                        // Add some bold text in the new cell:
                        cell.innerHTML = "Action";


                        // var th = document.createElement('th'); //column
                        // var text = document.createTextNode(0); //cell
                        // th.appendChild(Id);
                        // tr.appendChild(th);

			            //var cell = row.insertCell(5);
			            //cell.innerHTML=" Action 



                    }
                    else //
                    {
                        debugger
                       // rowID++;
                        //alert('alert');
                        var row = document.createElement('tr');
                        row.id = i;
                        row = table.insertRow(rowID);

                        //row.setAttribute("onclick", "RowClick(this)");

                        row.setAttribute("onclick", "RowClick(" + i + ")");


                        var FN = document.createElement('input');
                        FN.type = 'hidden';
                        FN.id = 'FN' + i;
                        FN.value = 'First Name' + i;

                        var LN = document.createElement('input');
                        LN.type = 'hidden';
                        LN.id = 'LN' + i;
                        LN.value = 'Last Name' + i;

                        var hdnMNo = document.createElement('input');
                        hdnMNo.type = 'hidden';
                        hdnMNo.id = 'MNo' + i;
                        hdnMNo.value = '998855442' + i;


                        var hdnEmail = document.createElement('input');
                        hdnEmail.type = 'hidden';
                        hdnEmail.id = 'em' + i;
                        hdnEmail.value = 'Email' + i;


                        var cellSr = row.insertCell(0);
                        cellSr.id = 'srno' + i;
                        cellSr.innerHTML = '0' + i;
                        cellSr.style.width = '50px';
                        cellSr.appendChild(FN);
                        cellSr.appendChild(LN);
                        cellSr.appendChild(hdnMNo);
                        cellSr.appendChild(hdnEmail);



                        var cellFN = row.insertCell(1);
                        cellFN.innerHTML = 'First Name' + i;
                        cellFN.style.width = '100px';

                        var cellLN = row.insertCell(2);
                        cellLN.innerHTML = 'Last Name' + i;
                        cellLN.style.width = '100px';

                        var cellmob = row.insertCell(3);
                        cellmob.innerHTML = '998855442' + i
                        cellmob.style.width = '100px';


                        var cellEmail = row.insertCell(4);
                        cellEmail.innerHTML = 'Email' + i;
                        cellEmail.style.width = '100px';

                        var cellButton = row.insertCell(5);
                        //cellButton.innerHTML = "<button id='btn' onclick='return RowDelete('" + i + "');'>BtnRow-'" + i + "'</button>";

                        //cellButton.innerHTML = "<button id='btn' onclick='return RowDelete(" + i + ");'>BtnRow-'" + i + "'</button>";

                        cellButton.innerHTML = "<button id='btn' onclick='return RowDelete(" + i + ");'>Del</button>";

                        cellButton.style.width = "50px";

                        //"RowClick(" + i + ")"


                    }


                }

            }
            var dvTable = document.getElementById("tableData");
            dvTable.innerHTML = "";
            dvTable.appendChild(table);
        }

        function RowDelete(rowid)
        {
            debugger
            //alert('Del');
            alert(rowid);
           // var Id = "";
            //if (document.getElementById(rowid) != null)
            if(rowid!=null)
            {
                var tbl1 = document.getElementById("attrtable");
                var tbllength = tbl1.rows.length;
                
                
               // var i = row.parentNode.parentNode.rowid;
              //  alert('In Del');
              //  aler(i);
                document.getElementById("attrtable").deleteRow(rowid);
                //document.getElementById('attrtable').deleteRow(i);
                

            }

            //var tbl1 = document.getElementById('attrtable');
            //var tbl = document.getElementById("attrtable");
            //var tbllength = tbl.rows.length;
            //for (var i = 0; i < tbllength; i++) //
            //{
            //    if (document.getElementById('srno' + i) != null)//
            //    {
            //        document.getElementById('srno' + i).innerHTML = i;
            //    }
            //}


            var tbl = document.getElementById("attrtable");
            var tbllength = tbl.rows.length;
            var abc = 1;
            for (var i = 0; i <= tbllength; i++) 
            {
                if (document.getElementById('srno' + i) != null)//
                {
                                    
                    //cellSr.id =
                        document.getElementById('srno' + i).innerHTML = i;
                  
                }
            }


            return false;

        }
        function RowClick(rownum) //
        {

            var FN="";
            if (document.getElementById('FN' + rownum) != null)//
            {
                FN = document.getElementById('FN' + rownum).value;
            }

            var LN = "";
            if (document.getElementById('LN' + rownum) != null)//
            {
                LN = document.getElementById('LN' + rownum).value;
            }
            var MOb = "";
            if (document.getElementById('MNo' + rownum) != null)//
            {
                MOb = document.getElementById('MNo' + rownum).value;
            }
            var email = "";
            if (document.getElementById('em' + rownum) != null)//
            {
                email = document.getElementById('em' + rownum).value;
            }

           // alert(FN);
           // alert(LN);
           // alert(MOb);
           // alert(email);


        }

    </script>
</body>
</html>
Posted
Comments
Abraham Andres Luna 10-Apr-18 16:12pm    
I notice that you commented out the rowID iteration, but then use it. Also, I don't see where you define the rowID variable.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900