如何在文本框中为用户给定的值设置索引,并将其附加到新创建的行的下表中,但如何在表格的每一行第一列中显示该索引?我是这类功能的新手。
$(document).ready(function(){
$('#addbtn').click(function(){
var s = $.trim($('#user').val());
var i = 0;
var c = 1;
var count = i+c;
if(s !=''){
$('#result').attr('src','http://www.clipartbest.com/cliparts/abT/y4b/abTy4bcL7.png');
$('#usertbl').append('<tr height=\"30\">'+'<td>'+count+'</td>'+'<td>'+s+'</td>'+'<td>'+'</td>'+'</tr>');
}
$('#user').val(' ');
});
});
&#13;
table,tr,th,td{
border:1px solid #dddddd;
border-collapse:collapse;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user"/>
<button id="addbtn">Add</button><span><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png" id="result" height="50" width="50"/></span>
<table style="width:100%;" id="usertbl">
<tr height="30">
<th width="34%">Serial Number</th>
<th width="33%">User NAme</th>
<th width="33%">Content</th>
</tr>
</table>
&#13;
答案 0 :(得分:1)
$(document).ready(function(){
var count = 1;
$('#addbtn').click(function(){
var s = $.trim($('#user').val());
if(s !=''){
$('#result').attr('src','http://www.clipartbest.com/cliparts/abT/y4b/abTy4bcL7.png');
$('#usertbl').append('<tr height=\"30\">'+'<td>'+count+'</td>'+'<td>'+s+'</td>'+'<td>'+'</td>'+'</tr>');
count++;
}
$('#user').val(' ');
});
$('#user').keyup(function(){
$('#result').attr('src','http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png');
});
});
&#13;
table,tr,th,td{
border:1px solid #dddddd;
border-collapse:collapse;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user"/>
<button id="addbtn">Add</button><span><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png" id="result" height="50" width="50"/></span>
<table style="width:100%;" id="usertbl">
<tr height="30">
<th width="34%">Serial Number</th>
<th width="33%">User NAme</th>
<th width="33%">Content</th>
</tr>
</table>
&#13;
在点击事件之外的Decalre变量,并在点击时使用增量过度。
答案 1 :(得分:1)
在上面点击功能声明我。
ie- i = 0;
答案 2 :(得分:1)
您可以计算行数并将其用于索引
var $tbl = $('#usertbl');
var count = $('tr', $tbl).length;