我正在使用基础5框架(不确定是否重要)。我将把所有信息传递到另一个页面,所以当我通过它时,每个CELL是一个可区分的项目/值是非常重要的,但我不确定如何开始这个问题。它应该在每次添加时添加另一行。删除也是如此。
任何人都可以指导我如何处理这个问题吗?这是我的标记:
<a href="#" class="button>Add line</a>
<a href="#" class="button>Delete line</a>
<div style="width:98%; margin:0 auto">
<table align="center">
<thead>
<tr>
<th>Status</th>
<th>Campaign Name</th>
<th>URL Link</th>
<th>Product</th>
<th>Dates (Start to End)</th>
<th>Total Budget</th>
<th>Daily Budget</th>
<th>Pricing Model</th>
<th>Bid</th>
<th>Targeting Info</th>
<th>Total Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>df</td>
<td>dfd</td>
<td>fdsd</td>
<td>fdsfd</td>
<td>dsf</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:3)
HTML(假设thead
没有改变):
<a href="#" class="button" id="add">Add line</a>
<a href="#" class="button" id="delete">Delete line</a>
<div style="width:98%; margin:0 auto">
<table align="center" id="table">
<thead>
<tr>
<th id="0">Status</th>
<th id="1">Campaign Name</th>
<th id="2">URL Link</th>
<th id="3">Product</th>
<th id="4">Dates (Start to End)</th>
<th id="5">Total Budget</th>
<th id="6">Daily Budget</th>
<th id="7">Pricing Model</th>
<th id="8">Bid</th>
<th id="9">Targeting Info</th>
<th id="10">Total Units</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JavaScript的:
<script type="text/javascript">
<!--
var line_count = 0;
//Count the amount of <th>'s we have
var header_count = $('#table > thead').children('th').length - 1;
$(document).ready(function() {
$('#add').click(function() {
//Create a new <tr> ('line')
$('#table > tbody').append('<tr></tr>');
//For every <th>, add a <td> ('cell')
for(var i = 0; i < header_count; i++) {
$('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>');
}
line_count++; //Keep track of how many lines were added
});
//Now you still need a function for deleting.
//You could add a button to every line which deletes its parent <tr>.
});
-->
</script>