如何在表中添加行
这是我的表从头开始看的内容
我想要做的是每当我点击＆＃34;添加按钮＆＃34;时再做一行。 （最右边的绿色）。所以我有两个＆＃34;添加按钮＆＃34;，一个是添加包含select类别的另一行（这应该放在item / specification行下面），另一个是为item / specification添加另一行。我正在使用boostrap，顺便说一句。
但是，我的输出看起来像这样
这是我的代码（视图）：
<div class="container table-responsive col-sm-12">
<form enctype="multipart/form-data" data-parsley-validate="">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th class="text-nowrap text-center">Category</th>
<th class="text-nowrap text-center col-sm-5">Item/Specification</th>
<th class="text-nowrap text-center col-sm-1">Unit</th>
<th class="text-nowrap text-center">Qty</th>
<th class="text-nowrap text-center" id="th-item">Schedule/Milestone
<table class="milestone-table text-nowrap">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</table>
</th>
<th class="text-nowrap text-center col-sm-1">Unit Price</th>
<th class="text-nowrap text-center col-sm-1">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-center">
<form id="make_checkbox_select">
<div class="control-group">
<div class="controls">
<select name="category" id="category">
<option value="0">Select Category</option>
</select>
</div>
</div>
</form>
</td>
<td class="text-nowrap text-center">
<div class="control-group">
<div class="controls">
<select name="items" id="items" class="col-sm-11">
<option value="0">Select Item</option>
</select>
</div>
</div>
</td>
<td> </td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width1" />
</td>
<td class="td-pad">
<table class="milestone-table">
<tr class="text-nowrap text-center">
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
</tr>
</table>
</td>
<td> </td>
<td> </td>
<td>
<span class="table-add glyphicon glyphicon-plus"></span>
</td>
</tr>
<!--Second row-->
<tr>
<td class="text-nowrap text-center">
</td>
<td class="text-nowrap text-center">
<div class="control-group">
<div class="controls">
<select name="items" id="items" class="col-sm-11">
<option value="0">Select Item</option>
</select>
</div>
</div>
</td>
<td> </td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width1" />
</td>
<td class="td-pad">
<table class="milestone-table">
<tr class="text-nowrap text-center">
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
</tr>
</table>
</td>
<td> </td>
<td> </td>
<td>
<span class="table-add1 glyphicon glyphicon-plus"></span>
</td>
</tr>
<!--hidden row-->
<tr class="hide">
<td class="text-nowrap text-center">
<form id="make_checkbox_select">
<div class="control-group">
<div class="controls">
<select name="category" id="category">
<option value="0">Select Category</option>
</select>
</div>
</div>
</form>
</td>
<td class="text-nowrap text-center">
<div class="control-group">
<div class="controls">
<select name="items" id="items" class="col-sm-11">
<option value="0">Select Item</option>
</select>
</div>
</div>
</td>
<td> </td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width1" />
</td>
<td class="td-pad">
<table class="milestone-table">
<tr class="text-nowrap text-center">
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
<td class="text-nowrap text-center">
<input type="number" placeholder="0" min="0" class="td-width" />
</td>
</tr>
</table>
</td>
<td> </td>
<td> </td>
<td>
<span class="table-add glyphicon glyphicon-plus"></span>
</td>
</tr>
</tbody>
</table>
</form>
</div>
这是我的js：
<script>
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.#myTable span.table-add").click(function () {
id++;
var master = $(this).parents("table.#myTable");
// Get a new row based on the prototype row
var prot = master.find(".hide").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.myTable span.table-remove").live("click", function () {
$(this).parents("tr").remove();
});
});
</script>
**This is my css:**
.milestone-table {
table-layout: fixed;
width: 421px;
margin-left: -9px;
}
.milestone-table th {
width: 35px;
display: inline-block;
}
.milestone-table td {
width: 30px;
display: inline-block;
margin: 0px;
margin-top: 0px;
}
.td-width {
width: 30px;
}
.td-width1 {
width: 40px;
}
#th-item {
width: 416px;
}
非常感谢。 ：）
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？