在dcat admin中如何实现点击添加数据的自定义表格功能？

<div class="box">
    <div>
        ID: <input type="text" id="idInput">
        <button id="addButton">添加</button>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>数量</th>
                <th>颜色</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

document.getElementById('addButton').addEventListener('click', function() {
    const id = document.getElementById('idInput').value;
    if (id) {
        axios.get('/your-api-endpoint/' + id)
            .then(response => {
                addRowToTable(response.data);
            })
            .catch(error => {
                console.error('Error:', error);
                // 处理错误，例如显示错误提示信息
            });
    }
});

function addRowToTable(data) {
    const tableBody = document.getElementById('dataTable').querySelector('tbody');
    const newRow = tableBody.insertRow();

    const idCell = newRow.insertCell();
    const quantityCell = newRow.insertCell();
    const colorCell = newRow.insertCell();

    idCell.textContent = data.id; // 假设后端返回的数据包含id字段
    quantityCell.innerHTML = `<input type="number" value="1">`; // 添加数量输入框
    colorCell.innerHTML = `<select><option value="red">红色</option><option value="blue">蓝色</option></select>`; // 添加颜色选择器
}

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\YourModel; // 替换成你的数据模型

class YourController extends Controller
{
    public function getData(Request $request, $id)
    {
        $data = YourModel::find($id); // 从数据库获取数据，根据你的模型调整

        if ($data) {
            return response()->json($data);
        } else {
            return response()->json(['error' => '数据未找到'], 404);
        }
    }
}

Route::get('/your-api-endpoint/{id}', [\App\Http\Controllers\Admin\YourController::class, 'getData']);