Multiple array demo


Create a list of items

Title Links
Test item in list 1

Create another list of items

Title Links
Test item in list 2
<section>
    <h2>Create a list of items</h2>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Links</th>
            </tr>
        </thead>
        <tbody data-array="List1" data-clear="1">
            <tr>
                <td data-func="input" data-name="Title" data-placeholder="Enter item title">Test item in list 1</td>
                <td>
                    <input type="text" data-func="link" data-target="List2" data-idfield="id" data-labelfield="Title"
                        data-linkbackfield="Links" name="Links" data-container="section" />
                    <input type="hidden" name="id" data-func="guid" />
                </td>
            </tr>
        </tbody>
    </table>
    <button data-target="List1" data-action="add">Add item</button>
    <hr>
    
    <h2>Create another list of items</h2>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Links</th>
            </tr>
        </thead>
        <tbody data-array="List2" data-clear="1">
            <tr>
                <td data-func="input" data-name="Title" data-placeholder="Enter item title">Test item in list 2</td>
                <td>
                    <input type="text" data-func="link" data-target="List1" data-idfield="id" data-labelfield="Title"
                        data-linkbackfield="Links" name="Links" data-container="section" />
                    <input type="hidden" name="id" data-func="guid" />
                </td>
            </tr>
        </tbody>
    </table>
    <button data-target="List2" data-action="add">Add item</button>
</section>
table td {width:50%;}
No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template