Question

我在我的jsp页面中有一个表，而且我还为每一行添加或删除了按钮，并且对于每一行，它在第一列中都有行号，但如果我删除特定行，则该行将被删除但是订单出错了。例如，默认情况下，表有5个，每行有一个订单号1,2,3,4,5如果删除第三行，那么它显示像row1，row2，row3，row5但我想要它像第1行第2行，第3行，第4行.......对于每个删除或添加行我想要行索引只是为了,,,可以任何一个帮助?? 好吧，我的代码是这样的...... 在这里我想要第一行的file1和第二行的文件2和第三行的文件3等。如果删除任何特定的行，那么订单应该再次按照重新排序。例如，你已经添加了4行，所以现在表包含file1，file2，file3，file4，file5，如果我们删除文件4，它不应该像file1，file2，file3，file5那样显示它应该显示为file1，file2，file3，file4。 / p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-   strict.dtd">      
<html xmlns="http://www.w3.org/1999/xhtml">



<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   
<script type="text/javascript">  
var i=0;j=0; 
$(document).ready(function () {

$('#btnAdd').click(function () {
    i++;
    j++;
    $('#HowManyRows').each(function(index) {
    $('#FirstRow').clone().appendTo('#listfiles');
});
});

});
function deleteRow(btn) {
 if(i>=1){
i--;
var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
 }
 </script>
</head>


<body>
<table id="listfiles">
    <tr id="FirstRow">
<td>File 1:<input type="file" name="filename" id="filename" value="xyz"/>
Description:<input type="text" name="description" id="filename" value=""  />
<a href="#" onclick="deleteRow(this)">DeleteFile</a><</td>
</tr>
    </table>
    <a href="#" id="btnAdd">Add additional file</a>
</body>   
</html>

Answer 1

尝试这样的事情

<强> HTML

<table id="my_table">
    <tr>
        <td>Row 1</td>
        <td><input type="button" value="REMOVE" class="delete"></td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td><input type="button" value="REMOVE" class="delete"></td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td><input type="button" value="REMOVE" class="delete"></td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td><input type="button" value="REMOVE" class="delete"></td>
    </tr>
</table>

<强>的javascript

    $(function(){
        $('.delete').click(function(){
            $(this).parent().parent().remove();
            $('#my_table tr').each(function(i){
                var index = i + 1
                $('td:first',this).text('Row ' + index);
             })
         })
     })

--------------已编辑的代码--------------------------

javascript代码，FIDDLE

$(document).ready(function () { $('#btnAdd').click(function () { $('#FirstRow').clone().appendTo('#listfiles'); }); }); function deleteRow(btn) { $(btn).parent().parent().remove(); }

jsp表动态添加和删除而不会破坏行顺序号

1 个答案: