What is the best way to programmatically insert new rows into a table

Question

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should create a new row every time the 'add' button is clicked, and the same should apply for the 'delete' button.

Can someone provide guidance on how to tackle this? Below is the markup that I am using:

<a href="#" class="button>Add line</a>
<a href="#" class="button>Delete line</a>

<div style="width:98%; margin:0 auto">
    <table align="center">
        <thead>
            <tr>
                <th>Status</th>
                <th>Campaign Name</th>
                <th>URL Link</th>
                <th>Product</th>
                <th>Dates (Start to End)</th>
                <th>Total Budget</th>
                <th>Daily Budget</th>
                <th>Pricing Model</th>
                <th>Bid</th>
                <th>Targeting Info</th>
                <th>Total Units</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>df</td>
                <td>dfd</td>
                <td>fdsd</td>
                <td>fdsfd</td>
                <td>dsf</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
            </tr>
        </tbody>
    </table>
  </div>

javascript html css zurb-foundation

Answer 1

Answer №1

When it comes to the HTML (assuming the thead remains unchanged), this is what you need:

<a href="#" class="button" id="add">Add line</a>
<a href="#" class="button" id="delete">Delete line</a>

<div style="width:98%; margin:0 auto">
    <table align="center" id="table">
        <thead>
            <tr>
                <th id="0">Status</th>
                <th id="1">Campaign Name</th>
                <th id="2">URL Link</th>
                <th id="3">Product</th>
                <th id="4">Dates (Start to End)</th>
                <th id="5">Total Budget</th>
                <th id="6">Daily Budget</th>
                <th id="7">Pricing Model</th>
                <th id="8">Bid</th>
                <th id="9">Targeting Info</th>
                <th id="10">Total Units</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

As for JavaScript, here's what you can do:

<script type="text/javascript">
<!--
    var line_count = 0;
    //Count the amount of <th>'s we have
    var header_count = $('#table > thead').children('th').length - 1;

    $(document).ready(function() {
        $('#add').click(function() {
            //Create a new <tr> ('line')
            $('#table > tbody').append('<tr></tr>');

            //For every <th>, add a <td> ('cell')
            for(var i = 0; i < header_count; i++) {
                $('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>');
            }

            line_count++; //Keep track of how many lines were added
        });

        //Now you still need a function for deleting.
        //You could add a button to every line which deletes its parent <tr>.
    });
-->
</script>

Answer 2

When it comes to the HTML (assuming the thead remains unchanged), this is what you need:

<a href="#" class="button" id="add">Add line</a>
<a href="#" class="button" id="delete">Delete line</a>

<div style="width:98%; margin:0 auto">
    <table align="center" id="table">
        <thead>
            <tr>
                <th id="0">Status</th>
                <th id="1">Campaign Name</th>
                <th id="2">URL Link</th>
                <th id="3">Product</th>
                <th id="4">Dates (Start to End)</th>
                <th id="5">Total Budget</th>
                <th id="6">Daily Budget</th>
                <th id="7">Pricing Model</th>
                <th id="8">Bid</th>
                <th id="9">Targeting Info</th>
                <th id="10">Total Units</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

As for JavaScript, here's what you can do:

<script type="text/javascript">
<!--
    var line_count = 0;
    //Count the amount of <th>'s we have
    var header_count = $('#table > thead').children('th').length - 1;

    $(document).ready(function() {
        $('#add').click(function() {
            //Create a new <tr> ('line')
            $('#table > tbody').append('<tr></tr>');

            //For every <th>, add a <td> ('cell')
            for(var i = 0; i < header_count; i++) {
                $('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>');
            }

            line_count++; //Keep track of how many lines were added
        });

        //Now you still need a function for deleting.
        //You could add a button to every line which deletes its parent <tr>.
    });
-->
</script>

What is the best way to programmatically insert new rows into a table

Answer №1

Similar questions

Building multiple files in React allows developers to divide their code

What is the process for generating SDF-Icons (Mapbox's specialized icons) from PNG files?

Troublesome tab key function in FireFox causing navigation issues

Is there a method to identify the quantity of audio channels within a <video> element? (HTML5)

Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

How can I display multiple images in a single row using PHP echo?

CSS: A guide to correctly setting an image URL for a checked checkbox

When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

Best Practices for Utilizing NPM Modules with TypeScript

Removing automatically assigned ID information in Firestore can be achieved by following these steps:

Carry out numerous commitments across a range of elements

Reverse the text alteration when the user leaves the field without confirming

jQuery plugin that controls scrolling speed using the mousewheel

As you minimize the browser window, you may notice a white space appearing when scrolling over

Display the table upon completion of the form submission

What is the best way to extract the geometry information from a gltf object?

Click on the ng-click attribute to access the HTML page

Place information from an input field into a specific row within a table

How can I create clickable table entries using php and html?

Troubleshooting Angular directives and the complications of closures