paul_vin Ответов: 0

Когда HTML таблица создается динамически то заголовок отображается в нижней части всей строки


Table is created dynamically then header is showing at the bottom of all row


кроме того, я хочу удалить конкретную запись из таблицы, для которой я предоставил кнопку delete, когда нажимаю кнопку delete несколько раз, она удаляет другую строку, то есть строку randam, я не знаю, как это происходит, так как я новичок в javascript, я не знаю, как справиться с этой ситуацией

Что я уже пробовал:

Мой весь код выглядит следующим образом


<!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>

Abraham Andres Luna

Я заметил, что вы закомментировали итерацию rowID, но затем использовали ее. Кроме того, я не вижу, где вы определяете переменную rowID.

0 Ответов