Dynamisk tabel/form - dynamiske felt navne & sum
Hej,Jeg har lavet denne dynamiske tabel, som indeholder formfelter.:
<script language="javascript">
var gRowId = 2;
function delRow(button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}
function addRow()
{
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
var row = document.createElement('TR');//Bogføringslinie
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');
var cell4 = document.createElement('TD');
var cell5 = document.createElement('TD');
var cell6 = document.createElement('TD');
var cell7 = document.createElement('TD');
var cell8 = document.createElement('TD');
var cell9 = document.createElement('TD');
var cell10 = document.createElement('TD');
var cell11 = document.createElement('TD');
var cell12 = document.createElement('TD');
var inp1 = document.createElement('SELECT');//Bogføringstype
inp1.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp1.setAttribute('className','standard_form_field');/*IE gets this*/
inp1.setAttribute('name','type' + gRowId);
inp1.setAttribute('value','bogføringstype');
/*Bogføringstype options fyldes*/
var type = new Array("Køb","Salg","Betaling");
var L = type.length;
var i;
var o;
o = document.createElement("option");
o.setAttribute("name","o");
o.setAttribute("id","o");
o.setAttribute("value","0");
o.appendChild(document.createTextNode("-- Vælg --"));
inp1.appendChild(o);
for (i=0; i<L; i++) {
o = document.createElement("option");
o.setAttribute("name","o"+i);
o.setAttribute("id","o"+i);
o.setAttribute("value",type[i]);
o.appendChild(document.createTextNode(type[i]));
inp1.appendChild(o);
}
var inp2 = document.createElement('INPUT');//Bilagsnummer
inp2.setAttribute('type','text');
inp2.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp2.setAttribute('className','standard_form_field');/*IE gets this*/
inp2.setAttribute('width','60');
inp2.setAttribute('name','doc_nr' + gRowId);
var inp3 = document.createElement('INPUT');//Eksternt bilagsnummer
inp3.setAttribute('type','text');
inp3.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp3.setAttribute('className','standard_form_field');/*IE gets this*/
inp3.setAttribute('width','60');
inp3.setAttribute('name','ext_doc_nr' + gRowId);
var inp4 = document.createElement('SELECT');//Kontotype
inp4.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp4.setAttribute('className','standard_form_field');/*IE gets this*/
inp4.setAttribute('name','account_type' + gRowId);
inp4.setAttribute('value','kontotype');
/*Kontotype options fyldes*/
var account_type = new Array("Finans","Debitor","Kreditor","Anlæg","Vare");
var L = account_type.length;
var i;
var o;
o = document.createElement("option");
o.setAttribute("name","o");
o.setAttribute("id","o");
o.setAttribute("value","0");
o.appendChild(document.createTextNode("-- Vælg --"));
inp4.appendChild(o);
for (i=0; i<L; i++) {
o = document.createElement("option");
o.setAttribute("name","o"+i);
o.setAttribute("id","o"+i);
o.setAttribute("value",account_type[i]);
o.appendChild(document.createTextNode(account_type[i]));
inp4.appendChild(o);
}
var inp5 = document.createElement('INPUT');//Konto nr.
inp5.setAttribute('type','text');
inp5.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp5.setAttribute('className','standard_form_field');/*IE gets this*/
inp5.setAttribute('width','60');
inp5.setAttribute('name','account_no' + gRowId);
var inp6 = document.createElement('INPUT');//Beskrivelse
inp6.setAttribute('type','text');
inp6.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp6.setAttribute('className','standard_form_field');/*IE gets this*/
inp6.setAttribute('width','120');
inp6.setAttribute('name','description' + gRowId);
var inp7 = document.createElement('INPUT');//Beløb
inp7.setAttribute('type','text');
inp7.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp7.setAttribute('className','standard_form_field');/*IE gets this*/
inp7.setAttribute('width','60');
inp7.setAttribute('name','amount' + gRowId);
var inp8 = document.createElement('SELECT');//Moms
inp8.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp8.setAttribute('className','standard_form_field');/*IE gets this*/
inp8.setAttribute('name','vat' + gRowId);
inp8.setAttribute('value','moms');
/*Momstype options fyldes*/
var vat_type = new Array("Fritaget");
var L = vat_type.length;
var i;
var o;
o = document.createElement("option");
o.setAttribute("name","o");
o.setAttribute("id","o");
o.setAttribute("value","0");
o.appendChild(document.createTextNode("Moms 25%"));
inp8.appendChild(o);
for (i=0; i<L; i++) {
o = document.createElement("option");
o.setAttribute("name","o"+i);
o.setAttribute("id","o"+i);
o.setAttribute("value",vat_type[i]);
o.appendChild(document.createTextNode(vat_type[i]));
inp8.appendChild(o);
}
var inp9 = document.createElement('SELECT');//Valuta
inp9.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp9.setAttribute('className','standard_form_field');/*IE gets this*/
inp9.setAttribute('name','currency' + gRowId);
inp9.setAttribute('value','valuta');
/*Valutatype options fyldes*/
var currency_type = new Array("AUD","BGN","CAD","CYP","CNY","EEK","EUR","PHP","HKD","HRK","IDR","ISK","JPY");
var L = currency_type.length;
var i;
var o;
o = document.createElement("option");
o.setAttribute("name","o");
o.setAttribute("id","o");
o.setAttribute("value","0");
o.appendChild(document.createTextNode("DKK"));
inp9.appendChild(o);
for (i=0; i<L; i++) {
o = document.createElement("option");
o.setAttribute("name","o"+i);
o.setAttribute("id","o"+i);
o.setAttribute("value",currency_type[i]);
o.appendChild(document.createTextNode(currency_type[i]));
inp9.appendChild(o);
}
var inp10 = document.createElement('INPUT');//Modkonto
inp10.setAttribute('type','text');
inp10.setAttribute('class','standard_form_field');/*Mozilla gets this*/
inp10.setAttribute('className','standard_form_field');/*IE gets this*/
inp10.setAttribute('width','60');
inp10.setAttribute('name','op_account' + gRowId);
var inp11 = document.createElement('INPUT');//Knap til at slette linie
inp11.setAttribute('type','button');
inp11.setAttribute('value','Delete');
inp11.onclick=function(){delRow(this);}
cell1.innerHTML = gRowId;
cell2.appendChild(inp1);
cell3.appendChild(inp2);
cell4.appendChild(inp3);
cell5.appendChild(inp4);
cell6.appendChild(inp5);
cell7.appendChild(inp6);
cell8.appendChild(inp7);
cell9.appendChild(inp8);
cell10.appendChild(inp9);
cell11.appendChild(inp10);
cell12.appendChild(inp11);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
row.appendChild(cell10);
row.appendChild(cell11);
row.appendChild(cell12);
tbody.appendChild(row);
gRowId++;
}
</script>
Det fungere som sådan ganske fint, men jeg mangler hjælp til 2 ting:
Hvis jeg indsætter en linie, så navngiver den, dens formfelter som f.eks. input1, input2 osv. men hvis jeg sletter en linie skulle det gerne være sådan at den ændre øvrige, således at det til enhver tid er øverste række som er nummer 1, og deraf input1, dernæst altid linie 2, som er nummer 2 og formfelterne skal være input2 og så fremdeles. Hvordan gøres dette?
Derefter så skal der implementeres en 'running' sum som skal tælle f.eks. amount1, amount2 osv. sammen. Hvordan gøres dette smartest, også så det fungere i FF?
Håber nogen er i stand til at hjælpe, og hvis der skal lidt mere afklaring til ovenstående, så spørg endelig.
På forhånd tak.
