使用按钮HTML + PHP + JavaScript动态显示表格行

Question

我有一个由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 
    } 
?> 

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

...当然关闭</tr>在你的循环结束。该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() 
} 

Answer 2

它是笨框架工作 更新视图部分

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

Answer 3

试试这个简单和容易，你可以编辑它轻松如你所愿。

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版本。

好运.. ['}