Unable to append to a table

Viewed 16

I have a table that I'm trying to append a new row onto. For some reason I'm getting a null error when trying to append to the tbody. "Uncaught TypeError: Cannot read properties of null (reading 'childNodes')"

$('#tbItems').append('<tr>' + newRow + '</tr>');

This is the line of code that appends the data to the table.

<table id="tbItems">
            <tr>
                <th>Note</th>
                <th>Part Number</th>
                <th>Quantity</th>
                <th>Buy Price</th>
                <th>Total Buy
                    <br />
                    <asp:Label ID="lblGrandTotalBuy" runat="server" Text="$0.00"></asp:Label>
                </th>
                <th>Sell Price</th>
                <th>Total Sell
                    <br />
                    <asp:Label ID="lblGrandTotalSell" runat="server" Text="$0.00"></asp:Label></th>
                <th>Profit
                    <br />
                    <asp:Label ID="lblGrandTotalProfit" runat="server" Text="$0.00"></asp:Label>
                </th>
                <th class="auto-style1">GP
                    <br />
                    <asp:Label ID="lblGrandTotalGP" runat="server" Text="0%"></asp:Label>
                </th>
            </tr>
            <asp:Repeater ID="rptLineItems" runat="server" DataSourceID="sqlLines">
                <HeaderTemplate>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:Label ID="rlblNote" runat="server" Text="Note:"></asp:Label>
                        </td>
                        <td>
                            <input class="PartNumberAC" name="PartNumberAC" value='<%#Eval("PartNumber") %>' />
                        </td>
                        <td>
                            <input name="txtQty" onchange="qtyChange(this)" value='<%#Eval("qty") %>' class="PartQty" />
                        </td>
                        <td>
                            <input name="txtBuyPrice" onchange="buyPriceChange(this)" value='<%#Eval("BuyPrice") %>' class="PartBuyPrice" />
                        </td>
                        <td>
                            <asp:Label ID="rlblTotalBuy" CssClass="cTotalBuy" runat="server" Text='<%#Eval("BuyPriceTotal") %>'></asp:Label>
                        </td>
                        <td>
                            <input name="rtxtSellPrice" onchange="sellPriceChange(this)" class="PartSellPrice" value='<%#Eval("SellPrice") %>' />
                        </td>
                        <td>
                            <asp:Label ID="rlblTotalSell" class="cTotalSell" runat="server" Text='<%#Eval("SellPriceTotal") %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="rlblProfit" class="cProfit" runat="server" Text='<%#Eval("Profit") %>'></asp:Label>
                        </td>
                        <td class="auto-style1">
                            <asp:Label ID="rlblGP" runat="server" Text='<%#Eval("GP") %>'></asp:Label>
                        </td>
                    </tr>

                </ItemTemplate>
                <FooterTemplate>
                </FooterTemplate>
            </asp:Repeater>
            <tr>
                <td>
                    <asp:Label ID="lblNote" runat="server" Text="Note:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtPartNumber" runat="server" CssClass="PartNumberAC" name="PartNumberAC" ClientIDMode="Static"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="txtQty" runat="server" onchange="qtyChange(this)" CssClass="PartQty" ClientIDMode="Static">0</asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="txtBuyPrice" runat="server" onchange="buyPriceChange(this)" CssClass="PartBuyPrice" ClientIDMode="Static">0</asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="lblTotalBuy" CssClass="cTotalBuy" runat="server" Text="0"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtSellPrice" runat="server" onchange="sellPriceChange(this)" CssClass="PartSellPrice" ClientIDMode="Static">0</asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="lblTotalSell" class="cTotalSell" runat="server" Text="0"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lblProfit" class="cProfit" runat="server" Text="0"></asp:Label>
                </td>
                <td class="auto-style1">
                    <asp:Label ID="lblGP" runat="server" Text="0"></asp:Label>
                </td>
            </tr>
        </table>

With this being the code for the table.

You can see that I'm calling the table by it's ID, so it shouldn't be null. I just cant figure out what is going on here.

1 Answers

I was able to bypass the issue by using a different method for adding a row.

Instead of: $('#tbItems').append('<tr>' + newRow + '</tr>');

I am now using:

var nRow = document.createElement("tr"); nRow.innerHTML = newRow; document.getElementById("tbItems").appendChild(nRow);

Related