Javascript 如何在表中添加行
这就是我的桌子从一开始的样子 我试图做的是，每当我点击“添加按钮”（最右边的绿色按钮）时，再做一行。因此，我有两个“添加按钮”，一个是添加另一行，其中包含所选类别（应放在项目/规格行下方），另一个是为项目/规格添加另一行。顺便说一句，我用的是boostrap 但是，我的输出如下所示 这是我的代码（视图）：Javascript 如何在表中添加行,javascript,php,jquery,html,Javascript,Php,Jquery,Html,这就是我的桌子从一开始的样子 我试图做的是，每当我点击“添加按钮”（最右边的绿色按钮）时，再做一行。因此，我有两个“添加按钮”，一个是添加另一行，其中包含所选类别（应放在项目/规格行下方），另一个是为项目/规格添加另一行。顺便说一句，我用的是boostrap 但是，我的输出如下所示 这是我的代码（视图）： <div class="container table-responsive col-sm-12"> <form enctype="multipart/form-
<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>
<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;
}
类别
项目/规格
单位
数量
时间表/里程碑
简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
单价
小计
选择类别
选择项
选择项