Show table rows dynamically using button HTML + PHP + JavaScript

Question

I have a table that consist of 40 rows. I need to fix my code so that initially one row should appear, and at the end of row i need a button to show the next row and so on.

Kind of the below screenshot

Currently my code looks like this:

<table align="center" id="dataTable" border=1>
<tr class="header">
<th class='text ce6'><Strong>Product Code</Strong></th>
<th class='text ce6'><Strong>Desc</Strong></th>
<th class='text ce6'><Strong>Qty</Strong></th>
<th class='text ce6'><Strong>Unit</Strong></th>
<?php
for ($i = 1 ; $i < 40 ; $i++)
    {  //Loop the table 
    echo "<select type='select' name='ProductCode";
    echo $i;
    echo "' id ='ProductCodee'  size='1' onchange='GetDesc(this)'> ";
    echo "<option value=''>-Select Type-</option>";
    for($x = 0; $x<=40; $x++)
       {
        echo "<option value='";
        echo $arrProducts[$x+1];    
        echo "'>";
        echo $arrProducts[$x];
        echo "</option>";
        $x = $x + 2;
        }
    echo"</select>";
?>
<td><input size=25 type="text" id="desc" readonly=true/></td>
<td><input size=5 type="number" id="qty" /></td>
<td><input size=5 type="text" id="unit" readonly=true/></td>
<td><INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /</td>
<?php
    }
?>

No @e4c5 it's optional, whatever he selects, that will be the posted rows. — Ahmed Adil Mohammed Ali
– Ahmed Adil Mohammed Ali, Commented Sep 13, 2015 at 11:07
@AhmedAli So the idea is to add only a single row as the user clicks but the maximum should be 40? — DirtyBit
– DirtyBit, Commented Sep 13, 2015 at 11:09
Exactly,40 is the maximum and user can add any more rows he want. — Ahmed Adil Mohammed Ali
– Ahmed Adil Mohammed Ali, Commented Sep 13, 2015 at 11:14
I can't really see where the problem/error is? Or do you think we are here to code it for you? — Wa Kai
– Wa Kai, Commented Sep 15, 2015 at 12:20

Frank N · Accepted Answer · 2015-09-15 12:31:32Z

To start with, issue all rows but the first one with a class hidden...

for ($i = 1 ; $i < 40 ; $i++)
    {  //Loop the table 
    if ( $i=1 )
        echo "<tr><td>";  // <= new
    else
        echo "<tr><td class='hidden'>";  // <= new
    // going on as before:
    echo "<select type='select' name='ProductCode";

...of course close that </tr> at the end of your loop. The CSS is simple:

.hidden {
    display: none;
}

The javascript for your show-button would be quite simple. Unhide the first hidden row. For simplicity, I am using jQuery, but plain vanilla javascript would be very close:

function addRow() {
    // find the table in which your button just got clicked:
    var $table = $(this).parents('table');
    // find the first hidden row and unhide (show) it:
    $table.find('tr.hidden:first').removeClass('hidden');

    ... other stuff you intend to do as part of addRow()
}

Nikhil.nj · Accepted Answer · 2015-09-15 13:17:27Z

Try this simple and easy you can edit it easily as you want.

Javascript Code

<script>
  function addRow()
  {

    var html = '';
    html += '<tr>';
    html +='<td><select><option> Select Bundle</option>';

    for(var i=1;i<=5;i++)
    {
        html += '<option value="'+i+'">'+i+'</option>';
    }

    html +='</select>';
    html +='</td>';
    html += '<td>Desc...</td>';
    html +='<td>2</td>';
    html +='<td>52</td>';
    html +='<td><button onclick="addRow();">Add</button></td>';
    html +='</tr>';
    $('tbody').append(html);

  }
</script>

HTML + PHP

<table class="table">
        <thead>
            <tr>
                <th>Project Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Unit</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <select>
                            <option> Select Bundle</option>
                    <?php
                        for($i=1; $i<=5; $i++)
                        {
                            echo '<option value="'.$i.'">'.$i.'</option>';
                        }
                    ?>
                        </select>
                    </td>
                    <td>Desc...</td>
                    <td>2</td>
                    <td>52</td>
                    <td><button onclick="addRow();">Add</button></td>
                </tr>    
        </tbody>
    </table>

In select tag you can manage function of javascript as per your requirement.

Remember I used jQuery to add new row ion table please use any jQuery version.

Good Luck.. ['}

if you satisfied just mark as correct and accept it so other can get easily the correct answer.

Zohaib · Accepted Answer · 2015-09-15 13:09:05Z

it is in codeigniter frame work update view part is

    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<div class="page-container">
    <!-- BEGIN PAGE HEAD -->
    <div class="page-head">
        <div class="container">
            <!-- BEGIN PAGE TITLE -->
            <div class="page-title">
                <h1><?php echo $title_text; ?> Management</h1>
            </div>
            <!-- END PAGE TITLE -->
        </div>
    </div>
    <!-- END PAGE HEAD -->
    <!-- BEGIN PAGE CONTENT -->
    <div class="page-content">
        <div class="container">
            <!-- BEGIN PAGE BREADCRUMB -->
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="#">Home</a>
                    <i class="fa fa-chevron-right"></i>
                </li>
                <li>
                    <a href="<?php echo base_url('administration/options'); ?>"><?php echo $title_text; ?></a>
                    <i class="fa fa-chevron-right"></i>
                </li>
                <li>
                    <a href="<?php echo base_url('administration/options/update/' . $details->option_id . '/' . $page); ?>">Update <?php echo $title_text; ?></a>
                </li>
            </ul>
            <!-- END PAGE BREADCRUMB -->
            <!-- BEGIN PAGE CONTENT INNER -->
            <div class="row">
                <div class="col-md-12">
                    <div class="tabbable tabbable-custom tabbable-noborder tabbable-reversed">
                        <div class="tab-content">
                            <div id="tab_0" class="tab-pane active">
                                <div class="portlet box blue">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-pencil"></i>
                                            Update <?php echo $title_text; ?>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <?php if (isset($_SESSION['error'])) { ?>
                                        <div class="Metronic-alerts alert alert-danger fade in">
                                            <button class="close" aria-hidden="true" data-dismiss="alert" type="button"></button>
                                            <i class="fa-lg fa fa-warning"></i>
                                            <?php
                                            echo $_SESSION['error'];
                                            unset($_SESSION['error']);
                                            ?>
                                        </div>
                                    <?php } ?>
                                </div>
                                <div class="portlet-body form">
                                    <!-- BEGIN FORM-->
                                    <?php echo form_open_multipart('administration/options/update/' . $details->option_id . '/' . $page); ?>
                                    <div class="form-horizontal">
                                        <div class="form-body">
                                            <input type="hidden" name="counter" id="counter" value="<?php echo $counter ?>">
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Option Name:<span class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-4">
                                                    <input type="text" name="name" placeholder="Option Type" value = "<?php
                                                    if (validation_errors() == '')
                                                        echo $details->name;
                                                    else
                                                        echo set_value('name');
                                                    ?>" class="form-control">
                                                    <span class="custom-error help-block help-block-error"><?php echo form_error('name') ?></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Select Option Type<span class="required" aria-required="true"> * </span></label>
                                                <div class="col-md-4">
                                                    <select class="form-control" name="type" autocomplete="off">
                                                        <optgroup label="Choose">
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'select');
                                                            elseif ($details->type == 'select')
                                                                echo 'selected="selected"';
                                                            ?> value="select">Select</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'radio');
                                                            elseif ($details->type == 'radio')
                                                                echo 'selected="selected"';
                                                            ?> value="radio">Radio</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'checkbox');
                                                            elseif ($details->type == 'checkbox')
                                                                echo 'selected="selected"';
                                                            ?> value="checkbox">Checkbox</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'image');
                                                            elseif ($details->type == 'image')
                                                                echo 'selected="selected"';
                                                            ?> value="image">Image</option>
                                                        </optgroup>
                                                        <optgroup label="Input">
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'text');
                                                            elseif ($details->type == 'text')
                                                                echo 'selected="selected"';
                                                            ?> value="text">Text</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'textarea');
                                                            elseif ($details->type == 'textarea')
                                                                echo 'selected="selected"';
                                                            ?> value="textarea">Textarea</option>
                                                        </optgroup>
                                                        <optgroup label="File">
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'file');
                                                            elseif ($details->type == 'file')
                                                                echo 'selected="selected"';
                                                            ?> value="file">File</option>
                                                        </optgroup>
                                                        <optgroup label="Date">
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'date');
                                                            elseif ($details->type == 'date')
                                                                echo 'selected="selected"';
                                                            ?> value="date">Date</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'time');
                                                            elseif ($details->type == 'time')
                                                                echo 'selected="selected"';
                                                            ?> value="time">Time</option>
                                                            <option <?php
                                                            if (!empty(validation_errors()))
                                                                echo set_select('type', 'datetime');
                                                            elseif ($details->type == 'datetime')
                                                                echo 'selected="selected"';
                                                            ?> value="datetime">Date &amp; Time</option>
                                                        </optgroup>
                                                    </select>
                                                    <span class = "custom-error help-block help-block-error"><?php echo form_error('type'); ?></span>
                                                </div>
                                            </div>
                                            <div class="form-group last">
                                                <label class="col-md-3 control-label">Sort Order:</label>
                                                <div class="col-md-4">
                                                    <input type="text" name="sort_order" placeholder="1" value = "<?php
                                                    if (validation_errors() == '')
                                                        echo $details->sort_order;
                                                    else
                                                        echo set_value('sort_order');
                                                    ?>" class="form-control">
                                                    <span class="custom-error help-block help-block-error"><?php echo form_error('sort_order') ?></span>
                                                </div>
                                            </div>
                                            <div class="portlet-body flip-scroll">
                                                <table class="table table-bordered table-striped table-condensed flip-content" id="options">
                                                    <thead class="flip-content">
                                                        <tr>
                                                            <th>
                                                                <span class="control-label">Option Value Name<span class="required" aria-required="true"> * </span></span>
                                                            </th>
                                                            <th> Image
                                                            </th>
                                                            <th>
                                                                Sort Order
                                                            </th>
                                                            <th>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <?php
                                                        if ($counter) {
                                                            for ($count = 0; $count < $counter; $count++):
                                                                ?>
                                                                <tr id="<?php echo 'rowno_' . $count; ?>">
                                                                    <td>
                                                                        <input type="hidden" name="option_value[pimage][]" value = "<?php
                                                                        if (validation_errors() == '')
                                                                            echo $choices[$count]->image;
                                                                        else
                                                                            echo set_value("option_value[pimage][$count]");
                                                                        ?>">
                                                                        <div class="form-group">
                                                                            <div class="col-md-12">
                                                                                <input type="text" name="option_value[name][]" placeholder="Option Name" value = "<?php
                                                                                if (validation_errors() == '')
                                                                                    echo $choices[$count]->name;
                                                                                else
                                                                                    echo set_value("option_value[name][$count]");
                                                                                ?>" class="form-control">
                                                                                <span class="custom-error help-block help-block-error"><?php echo form_error("option_value[name][$count]"); ?></span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class="form-group">
                                                                            <div class="col-md-12">
                                                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                                                    <div class="fileinput-new thumbnail" style="width:100px; height:100px;">
                                                                                        <?php if (isset($choices[$count])) {
                                                                                            ?>
                                                                                            <img src="<?php echo base_url() . 'uploads/options/' . $choices[$count]->image ?>" alt="<?php echo $choices[$count]->image; ?>"/>
                                                                                        <?php }
                                                                                        ?>
                                                                                    </div>
                                                                                    <div class = "fileinput-preview fileinput-exists thumbnail" style = "max-width: 100px; max-height: 100px;"></div>
                                                                                    <div>
                                                                                        <span class = "btn default btn-file">
                                                                                            <span class = "fileinput-new">Select image </span>
                                                                                            <span class = "fileinput-exists">Change </span>
                                                                                            <input type = "file" name = "option_value[image][]">
                                                                                        </span>
                                                                                        <a href = "javascript:;" class = "btn red fileinput-exists" data-dismiss = "fileinput">Remove </a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class = "form-group">
                                                                            <div class = "col-md-12">
                                                                                <input type = "text" name = "option_value[sort_order][]" value = "<?php
                                                                                if (validation_errors() == '')
                                                                                    echo $choices[$count]->sort_order;
                                                                                else
                                                                                    echo set_value("option_value[sort_order][$count]");
                                                                                ?>" placeholder = "1" class = "form-control">
                                                                                <span class = "custom-error help-block help-block-error"><?php echo form_error("option_value[sort_order][$count]")
                                                                                ?></span>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class="form-group">
                                                                            <div class="col-md-12">
                                                                                <a>
                                                                                    <button type="button"  onclick="removerow(<?php echo "rowno_$count"; ?>)" class="btn default btn-md red" id="sample_editable_1_new">
                                                                                        <i class="fa fa-trash-o"></i></button>
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                </tr>
                                                                <?php
                                                            endfor;
                                                        }
                                                        ?>
                                                    </tbody>
                                                    <tfoot>
                                                    <td colspan="3"></td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <a>
                                                                <button onclick="addnewrow()" type="button" class="btn blue" id="sample_editable_1_new">
                                                                    <i class="fa fa-plus"></i>
                                                                </button>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="form-actions">
                                            <div class="row">
                                                <div class="col-md-offset-3 col-md-9">
                                                    <button class="btn blue" type="submit">Update <?php echo $title_text; ?></button>
                                                    <button class="btn default" type="button" onclick="history.go(-1);">Cancel</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php form_close(); ?>
                                    <!-- END FORM-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
</div>
<!-- END PAGE CONTENT -->
<script>
    $('document').ready(function () {
        var val = $('select[name=\'type\']').val();
        if (val == 'select' || val == 'radio' || val == 'checkbox' || val == 'image') {
            $('#options').show();
        } else {
            $('#options').hide();
        }
    });

    $('select[name=\'type\']').on('change', function () {
        if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox' || this.value == 'image') {
            $('#options').show();
        } else {
            $('#options').hide();
        }
    });

    function removerow(id) {
        $(id).remove();
    }

    function addnewrow() {
        var counter = $('#counter').val();
        var row = '<tr id="rowno_' + counter + '">';
        row = row + '<td><input type="hidden" name="option_value[pimage][]" value = "0"><div class="form-group"><div class="col-md-12">';
        row = row + '<input type="text" name="option_value[name][]" placeholder="Option Name" class="form-control">';
        row = row + '</div></div></td><td><div class="form-group"><div class="col-md-12"><div class="fileinput fileinput-new" data-provides="fileinput">';
        row = row + '<div class="fileinput-new thumbnail" style="width:100px; height:100px;"></div>';
        row = row + '<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 100px; max-height: 100px;"></div>';
        row = row + '<div><span class="btn default btn-file"><span class="fileinput-new">Select image </span><span class="fileinput-exists">Change </span>';
        row = row + '<input type="file" name="option_value[image][]">';
        row = row + '</span><a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput">Remove </a></div></div></div></div></td><td>';
        row = row + '<div class="form-group"><div class="col-md-12">';
        row = row + '<input type="text" name="option_value[sort_order][]" placeholder="Sort Order" class="form-control">';
        row = row + '</div></div></td><td>';
        row = row + '<div class="form-group"><div class="col-md-12"><a><button type="button"  onclick="removerow(' + 'rowno_' + counter + ')" class="btn default btn-md red" id="sample_editable_1_new"><i class="fa fa-trash-o"></i></button></a></div></div>';
        row = row + '</tr>';
        $("#options > tbody").append(row);
        counter++;
        $('#counter').val(counter);
    }
</script>

and controller part is:

i can't upload due to limit 30,000 :)

Collectives™ on Stack Overflow

Show table rows dynamically using button HTML + PHP + JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related