No Data available in table

Question

Hi

I want No Data available in table should get removed when record is added. Below is the code.

StringBuilder htmlTable = new StringBuilder();
            htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>");
            htmlTable.Append("<thead><tr style='background-color:green;color:white; text-align: center;'><th>Sr.</th><th>Document</th><th>File Name</th><th class='text-center nosort'>Action</th></tr></thead>");
            htmlTable.Append("<tbody>");
            htmlTable.Append("</tbody>");
            htmlTable.Append("</table>");
            PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() });

document.getElementById('addRowBtn').addEventListener('click', function () {
            // Get the table body
            var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0];

            // Get the values from the dropdown and file upload
            var documentValue = document.getElementById('<%= ddlDocument.ClientID %>').value;
            var documentText = document.getElementById('<%= ddlDocument.ClientID %>').options[document.getElementById('<%= ddlDocument.ClientID %>').selectedIndex].text;
            var fileUpload = document.getElementById('<%= FileUploadIdentityProof.ClientID %>');
            var fileName = fileUpload.value.split('\\').pop();

            // Create a new row
            var newRow = tableBody.insertRow();

            // Insert cells and set their content
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            var cell3 = newRow.insertCell(2);
            var cell4 = newRow.insertCell(3);

            cell1.innerHTML = tableBody.rows.length; // Sr. No.
            cell2.innerHTML = documentText; // Document
            cell3.innerHTML = fileName; // File Name
            cell4.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)">Delete</button>'; // Action

            // Clear the file upload control
            fileUpload.value = '';
        });

Thanks

Naimish Makwana · Answer

To ensure that the “No Data available” message is removed when a record is added to the table you can add a check to remove any existing placeholder row before inserting the new row. Here’s how you can modify your JavaScript code to achieve this: Add a placeholder row with the “No Data available” message when the table is initially created. Remove the placeholder row when a new row is added. Here’s the updated code: C# Code StringBuilder htmlTable = new StringBuilder(); htmlTable.Append( ); htmlTable.Append( Sr. Document File Name Action ); htmlTable.Append( ); htmlTable.Append( No Data available ); htmlTable.Append( ); htmlTable.Append( ); PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() }); JavaScript Code document.getElementById('addRowBtn').addEventListener('click' function () { // Get the table body var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0]; // Remove the No Data available row if it exists var noDataRow = document.getElementById('noDataRow'); if (noDataRow) { tableBody.removeChild(noDataRow); } // Get the values from the dropdown and file upload var documentValue = document.getElementById(' ').value; var documentText = document.getElementById(' ').options[document.getElementById(' ').selectedIndex].text; var fileUpload = document.getElementById(' '); var fileName = fileUpload.value.split('\').pop(); // Create a new row var newRow = tableBody.insertRow(); // Insert cells and set their content var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML = tableBody.rows.length; // Sr. No. cell2.innerHTML = documentText; // Document cell3.innerHTML = fileName; // File Name cell4.innerHTML = ' Delete '; // Action // Clear the file upload control fileUpload.value = ''; }); This code will ensure that the “No Data available” message is removed as soon as a new row is added to the table. If you have any further questions or need additional help feel free to ask Thanks

Amit Mohanty · Answer

Try the below code once. StringBuilder htmlTable = new StringBuilder(); htmlTable.Append( ); htmlTable.Append( Sr. Document File Name Action ); htmlTable.Append( ); // Add placeholder row htmlTable.Append( No Data available ); htmlTable.Append( ); htmlTable.Append( ); PlaceHolderTable0.Controls.Add(new Literal { Text = htmlTable.ToString() }); document.getElementById('addRowBtn').addEventListener('click' function () { // Get the table body var tableBody = document.getElementById('tbldata').getElementsByTagName('tbody')[0]; // Check if the No Data available row exists and remove it var noDataRow = document.getElementById('noDataRow'); if (noDataRow) { tableBody.removeChild(noDataRow); } // Get the values from the dropdown and file upload var documentValue = document.getElementById(' ').value; var documentText = document.getElementById(' ').options[document.getElementById(' ').selectedIndex].text; var fileUpload = document.getElementById(' '); var fileName = fileUpload.value.split('\').pop(); // Create a new row var newRow = tableBody.insertRow(); // Insert cells and set their content var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML = tableBody.rows.length; // Sr. No. cell2.innerHTML = documentText; // Document cell3.innerHTML = fileName; // File Name cell4.innerHTML = ' Delete '; // Action // Clear the file upload control fileUpload.value = ''; });