每行有4个输入元素,用户可以根据需要添加或删除行。每次添加或删除行时,我都会动态重建网格。
为什么要重建?在DOM中插入新行或删除现有行即可。不是问题。
这里是一个使用原型添加/删除行的示例HTML文件:
<html>
<head>
<style>
</style>
<script type="text/javascript"
src="http://api.prototypejs.org/javascripts/prototype.js"></script>
<script type="text/javascript">
function createGrid(id){
addRow($(id),0);
}
function deleteRow(elem, index){
elem.children[index].remove();
}
function addRow(elem, index){
var row = new Element('div',{'class':'row'});
for(var i = 0; i < 4; i++){
row.insert({
bottom: new Element('input',{'type':'text'})
});
}
row.insert({
bottom: new Element('a',{'href':'#'})
.update('Add Row')
.observe('click',function(event){
var row = Event.element(event).up();
var addIndex = $A(row.up().children).indexOf(row);
addRow(elem, addIndex);
Event.stop(event);
})
}).insert({
bottom: new Element('a',{'href':'#'})
.update('Delete Row')
.observe('click',function(event){
var row = Event.element(event).up();
var delIndex = $A(row.up().children).indexOf(row);
deleteRow(elem, delIndex);
Event.stop(event);
})
});
if(index > 0){
elem.children[index-1].insert({after:row});
}else{
elem.insert({top:row});
}
}
Event.observe(window,"load",function(){
createGrid('grid');
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
复制/粘贴到一个新文件中并尝试。我相信你可以轻松地将功能移植到你正在使用的任何库中。
document.getElementById()
来引用元素? - AbboqgetElementById
)。 - RoToRa