When HTML table is created dynamically then header is showing at the bottom of all row

Question

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 10-Apr-18 2:37am

paul_vin

Add a Solution

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.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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