Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

harishmani09's avatar

How to add a table row using alpinejs

Hi! I am trying to add table row by button click in a blade file. It's a standard Laravel 9 application with alpinejs pulled in.

The desired behaviour is that when someone clicks on the add replacement button, it should add an additional row in the table. While alpine js works and executes other commands like "$refs.partTable.remove()" , it fails to execute "$refs.partTable.insertRow(0)".

My Code is as follows:

<div x-data class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 sm:px-6 lg:px-8">
    <form action="/partReplacement" method="POST">
        @csrf
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-xl font-semibold text-gray-900">Part Replacement Details</h1>
                <p class="mt-2 text-sm text-gray-700">Please enter details of parts replaced</p>
            </div>
            <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
                <button @click="$refs.partTable.insertRow(0)" type="button"
                    class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm">Add
                    Replaced Parts</button>
            </div>
        </div>
        <div
            class="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col"
                            class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                            Sr No</th>
                        <th scope="col"
                            class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">
                            Description</th>
                        <th scope="col"
                            class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell">
                            Part Code</th>
                </thead>
                <tbody x-ref="partTable" class="divide-y divide-gray-200 bg-white">
                    <tr>
                        <td
                            class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
                            <div class="mt-1">
                                <input type="text" name="part_code" id="volt"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            </div>

                        </td>
                        <td class="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">
                            <div class="mt-1">
                                <input type="text" name="part_description" id="volt"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            </div>
                        </td>
                        <td class="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
                            <div class="mt-1">
                                <input type="text" name="part_srno" id="volt"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
            <button type="submit"
                class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button>
        </div>
    </form>
</div>
0 likes
0 replies

Please or to participate in this conversation.