【问题标题】:Show table rows dynamically using button HTML + PHP + JavaScript使用按钮 HTML + PHP + JavaScript 动态显示表格行
【发布时间】:2015-09-15 21:17:27
【问题描述】:

我有一个包含 40 行的表。 我需要修复我的代码,以便最初应该出现一行,并且在行的末尾我需要一个按钮来显示下一行等等。

类似下面的截图

目前我的代码如下所示:

<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
    }
?>

【问题讨论】:

  • 你真的要强制用户点击 40 次吗?
  • No @e4c5 它是可选的,无论他选择什么,都将是发布的行。
  • @AhmedAli 所以这个想法是在用户点击时只添加一行,但最大值应该是 40?
  • 没错,40 是最大值,用户可以添加任何他想要的行。
  • 我真的看不出问题/错误在哪里?还是您认为我们是来为您编写代码的?

标签: javascript php html


【解决方案1】:

首先,发出除第一个隐藏类的所有行...

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";

...当然在循环结束时关闭&lt;/tr&gt;。 CSS 很简单:

.hidden {
    display: none;
}

显示按钮的 javascript 非常简单。取消隐藏第一个隐藏行。为简单起见,我使用的是 jQuery,但普通的 javascript 会非常接近:

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()
}

【讨论】:

    【解决方案2】:

    试试这个简单易行的方法,你可以随心所欲地轻松编辑。

    Javascript 代码

    <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>
    

    在选择标签中,您可以根据需要管理javascript的功能。

    请记住我使用 jQuery 添加新行离子表请使用任何 jQuery 版本。

    祝你好运.. ['}

    【讨论】:

    • 如果您满意,只需标记为正确并接受它,以便其他人可以轻松获得正确答案。
    【解决方案3】:

    它在 codeigniter 框架中 更新视图部分是

        <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>
    

    控制器部分是:

    由于限制 30,000,我无法上传 :)

    【讨论】:

      猜你喜欢
      • 2017-06-06
      • 2014-09-26
      • 2013-03-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-12-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多