我正在使用CSS添加自动递增序列号,这里我面临的问题是它可以正常工作,但是行并未创建,即未构建其设计。谁能告诉我我在做什么错,我也想显示1..2..3但它在打印我11..22..33吗?我是这些技术的新手。因此,任何帮助将不胜感激
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">Objective No.</th>
<th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">My Performance Objective</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Weightage<br>100%</th>
<th colspan="5" style="text-align: center; border:1px solid #e3ebf3;">Standards of Performance</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Outcome</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Score</th>
</tr>
<tr colspan="5">
<th style="text-align: center; border:1px solid #e3ebf3;">1</th>
<th style="text-align: center; border:1px solid #e3ebf3;">2</th>
<th style="text-align: center; border:1px solid #e3ebf3;">3</th>
<th style="text-align: center; border:1px solid #e3ebf3;">4</th>
<th style="text-align: center; border:1px solid #e3ebf3;">5</th>
</tr>
<tr colspan="5">
<th style="text-align: center; border:1px solid #e3ebf3;">Unsatisfactory</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Partially <br>Meets<br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Fully<br> Meets<br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Exceeds <br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Far <br>Exceeds<br> Objectives</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;">1</td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;">2</td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;">3</td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="button" class="btn btn-success" value="Add Row" id="newobj">Add Objective</button>
<button type="button" class="remove" value="Delete Row" >Delete Objective</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
CSS:
body
{
counter-reset: Count-Value;
}
table
{
border-collapse: separate;
}
tr td:first-child:before
{
counter-increment: Count-Value;
content: "" counter(Count-Value);
}
jquery:
$(document).add(function()
{
$("#newobj").click(function(){
var addcontrol="<tr>"
addcontrol+="<td></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="</tr>"
$("table tbody").append(addcontrol);
});
//alert("Cannot add more than 8 objectives");
$(document).on('click', '.remove', function() {
$(this).parents('tr').remove();
});
});
检查以下代码,可以正常工作。
$(document).add(function()
{
$("#newobj").click(function(){
var addcontrol="<tr>"
addcontrol+="<td style='text-align: center;border:1px solid #e3ebf3;'></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="<td><input type='text' ></td>"
addcontrol+="</tr>"
$("table tbody").append(addcontrol);
});
//alert("Cannot add more than 8 objectives");
$(document).on('click', '.remove', function() {
$(this).parents('tr').remove();
});
});
body
{
counter-reset: Count-Value;
}
table
{
border-collapse: separate;
}
tr td:first-child:before
{
counter-increment: Count-Value;
content: "" counter(Count-Value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">Objective No.</th>
<th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">My Performance Objective</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Weightage<br>100%</th>
<th colspan="5" style="text-align: center; border:1px solid #e3ebf3;">Standards of Performance</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Outcome</th>
<th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Score</th>
</tr>
<tr colspan="5">
<th style="text-align: center; border:1px solid #e3ebf3;">1</th>
<th style="text-align: center; border:1px solid #e3ebf3;">2</th>
<th style="text-align: center; border:1px solid #e3ebf3;">3</th>
<th style="text-align: center; border:1px solid #e3ebf3;">4</th>
<th style="text-align: center; border:1px solid #e3ebf3;">5</th>
</tr>
<tr colspan="5">
<th style="text-align: center; border:1px solid #e3ebf3;">Unsatisfactory</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Partially <br>Meets<br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Fully<br> Meets<br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Exceeds <br> Objectives</th>
<th style="text-align: center; border:1px solid #e3ebf3;">Far <br>Exceeds<br> Objectives</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
<tr>
<td style="text-align: center;border:1px solid #e3ebf3;"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
<td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="button" class="btn btn-success" value="Add Row" id="newobj">Add Objective</button>
<button type="button" class="remove" value="Delete Row" >Delete Objective</button>
<button type="button" class="btn btn-success">Submit</button>
</div>