使用按钮 HTML + PHP + JavaScript 动态显示表格行
[英]Show table rows dynamically using button HTML + PHP + JavaScript
问题描述
I have a table that consist of 40 rows.
我有一个由 40 行组成的表。 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
}
?>
3 个解决方案
解决方案1
3 已采纳 2015-09-15 12:31:32
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. ...当然在循环结束时关闭</tr> 。 The CSS is simple: CSS很简单：
.hidden {
display: none;
}
The javascript for your show-button would be quite simple.显示按钮的 javascript 将非常简单。 Unhide the first hidden row.取消隐藏第一个隐藏行。 For simplicity, I am using jQuery, but plain vanilla javascript would be very close:为简单起见，我使用 jQuery，但普通的 vanilla 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
1 2015-09-15 13:17:27
Try this simple and easy you can edit it easily as you want.试试这个简单易行的方法，您可以根据需要轻松编辑它。
Javascript Code 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 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.在选择标签中，您可以根据您的要求管理 javascript 的功能。
Remember I used jQuery to add new row ion table please use any jQuery version.请记住我使用 jQuery 添加新的行离子表，请使用任何 jQuery 版本。
Good Luck.. ['}祝你好运.. ['}
解决方案3
0 2015-09-15 13:09:05
it is in codeigniter frame work update view part is它在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 & 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 :)由于限制 30,000，我无法上传:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用Javascript动态地将行添加到html表 - Dynamically adding rows to an html table, using Javascript
使用 JavaScript 动态过滤 HTML 表的行 - dynamically filter rows of a HTML table using JavaScript
使用 Javascript 显示/隐藏 HTML 表行 - Show / Hide HTML Table rows using Javascript
使用JavaScript代码将多行和多列动态插入html表中 - Insert multiple rows and columns to a table in html dynamically using javascript code
使用 Javascript 从 html 表中动态删除行 - Dynamically removing rows from an html table, using Javascript
JavaScript - 在 HTML 表中动态添加表行 - JavaScript - Dynamically add table rows in HTML table
使用 vanilla javascript 在 HTML 表行中动态添加按钮 - Add a button dynamically in a HTML table row using vanilla javascript
如何使用JavaScript显示/隐藏隐藏的HTML表行（没有jQuery） - How to show/hide hidden HTML table rows using JavaScript (no jQuery)
如何使用 JAVASCRIPT 在每个 HTML 表行中添加一个按钮 - How to add a BUTTON in to each HTML table rows using JAVASCRIPT
使用 PHP 和 JavaScript 动态搜索 SQL 表并在 HTML 上显示 - Dynamically search SQL table and display on HTML using PHP and JavaScript
相关标签