jsp表動態添加和刪除動態而不破壞行序號

我在我的jsp頁面中有一個表，並且我還有向每一行添加或刪除按鈕,,,並且對於每一行它在第一列中都有行號但如果我刪除特定的行，行將被刪除，但順序出錯。例如，默認情況下，表中有5行，每行的順序號爲1,2,3,4,5，如果刪除第3行，則顯示爲像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。jsp表動態添加和刪除動態而不破壞行序號

<!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>

來源

2013-11-27 preeth

簡單地使用行索引 –

可以請你跟我說清楚......我是新來這個設計的一部分？ – preeth

@ user3040482以及你可以發佈你的代碼，所以我們可以看到問題出在哪裏。 – Tafari

嘗試這樣的事情

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(); 
    }

來源

2013-11-27 07:32:36

它不工作... – preeth

有看看那裏....我的代碼就像那 – preeth

檢查編輯的代碼是這是你想要的http://jsfiddle.net/dkfG2/ –

jsp表動態添加和刪除動態而不破壞行序號

回答

相關問題