Avatar billede cmau Nybegynder
31. august 2007 - 14:20 Der er 12 kommentarer

At fjerne felter fra en tabel med javascript

Hej eksperter

Jeg har et lille problem med mit script. Det meningen at man skal kunne tilføje tr og td til en tabel, det virker også fint nok. Så har jeg fået lavet en funktion hvor jeg kan slette den nedereste en af gangen, men da jeg prøver at lave en funktion, så jeg kan slette den jeg selv har lyst til (fx den i midten), så kan jeg ikke få det til at virke ordenligt.

Grunden kender jeg, da jeg ved at slette nogen før en, giver dem et andet id, en det de blev definere med. Det lidt svært at forklare, men koden er her under og i kan prøve at se om i kan slette dem alle ved at klikke hvor der står ssss ud for hver tr.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>New document</title>
    <meta name="generator" content="TSW WebCoder">
    <script type="text/javascript">
    function appendRow() {
    var tbl = document.getElementById('test');
    var newRow = tbl.insertRow(tbl.rows.length);
    var newCell = newRow.insertCell(0);
    var newCell2 = newRow.insertCell(1);
    newCell.innerHTML = '<a href="#" onclick="deleteLastRow('+tbl.rows.length+')"><b>sssss</b>'+tbl.rows.length+'</a>Hello World!';
    newCell2.innerHTML = 'Hell222o World!';
}
    function deleteLastRow(id) {
        var tbl = document.getElementById('test');
    if(!id) {
        if(tbl.rows.length > 0) tbl.deleteRow(tbl.rows.length - 1);
    } else {
        tbl.deleteRow(id-1);
       
    }
}
    </script>
</head>

<body>
<a href="#" onclick="appendRow()">aaaa</a> - <a href="#" onclick="deleteLastRow()">sssss</a>
<table id="test">
    <tr>
        <td>ssssssss
        </td>
        <td>asd
        </td>
    </tr>
</table>
</body>
</html>
Avatar billede olebole Juniormester
31. august 2007 - 15:32 #1
<ole>

Du bør bruge standardiseret DOM og helt glemme, du nogensinde har hørt om innerHTML. Dvs, du skal bruge document.createElement, document.createTextNode, ELEMENT.appendChild, ELEMENT.removeChild, osv.

Desuden _skal_ et table-element som minimum indeholde et thead-, tbody- eller yfoot-element. Et table-element kan ikke have tr-elementer som børn ... tr-elementer kan kun være børn af de tre førnævnte elementtyper.

Du må læse lidt mere teori  ;o)

/mvh
</bole>
Avatar billede cmau Nybegynder
31. august 2007 - 21:58 #2
Hej ole.

Jeg vidste ikke at mit ikke var standardiseret, det så ellers sådan ud i følge w3c. Men har du nogle links så kan jeg læse mig lidt klogere, jeg kender nemlig ikke til noget af det du beskriver og ved ikke lige hvor jeg skal tage fat så.
Avatar billede olebole Juniormester
01. september 2007 - 00:12 #3
DOM'en er sådan set standardiseret til HTML-brug, men det er mere eller mindre levn fra de gamle version 4-browsere ... innerHTML er dog komplet udenfor standard.

Vejen går mod den del af DOM'en, som er fælles for XML og HTML - og det eneste, du kan bruge under XML. Den bør du faktisk også bruge under HTML 4.01.

Her kan du se en samlet oversigt over ECMA/DOM bindingerne ... det, der knytter DOM'en sammen med script-sprog som JavaScript, JScript og VBScript, som alle bygger på samme standard - ECMA. Her finder du også de metoder, jeg nævnte ovenfor:
    http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ecma-script-binding.html
Avatar billede olebole Juniormester
01. september 2007 - 00:12 #4
Der skulle stå:
"Vejen går mod den del af DOM'en, som er fælles for XML og HTML - og det eneste, du kan bruge under XHTML."
Avatar billede olebole Juniormester
01. september 2007 - 02:14 #5
- så har jeg lidt bedre tid  :)
Du kunne f.eks. skrive dine funktioner sådan:

function appendRow() {
    var cE, cT, tbd, newRow, lnk, bld, len;
    cE = document.createElement;
    cT = document.createTextNode;
    tbd = document.getElementById("test").getElementsByTagName("tbody")[0];
    newRow = cE("tr");
    tbd.appendChild(newRow);
    newCell = cE("td");
    newRow.appendChild(newCell);
    lnk = cE("a");
    newCell.appendChild(lnk);
    lnk.setAttribute("href", "#");
    len = tbd.getElementsByTagName("tr").length;
    if (lnk.attachEvent) lnk.attachEvent("onclick", function(){deleteLastRow(len)});
    else if (lnk.addEventListener) lnk.addEventListener("click", function(){deleteLastRow(len)}, false);
    else lnk.onclick = function(){deleteLastRow(len)};
    bld = cE("b");
    lnk.appendChild(bld);
    bld.appendChild( cT("sssss") );
    lnk.appendChild( cT(len) );
    newCell.appendChild( cT("Hello World!") );
    newCell = cE("td");
    newRow.appendChild(newCell);
    newCell.appendChild( cT("Hell222o World!") );
}

function deleteLastRow(id) {
    var tbd = document.getElementById("test").getElementsByTagName("tbody")[0];
    if(!id) {
        if (tbd.getElementsByTagName("tr").length > 0) tbd.removeChild(tbd.lastChild);
    } else {
        tbd.removeChild(tbd.getElementsByTagName("tr")[id-1]);
    }
}

- men det kræver, du skriver et en valid tabel. Table-elementer kan ikke have tr-elementer som børn - men thead-, tbody- og tfoot-elementer, som alle kan have tr-elementer som børn  ;o)
Avatar billede olebole Juniormester
01. september 2007 - 02:38 #6
Du kan også oprette en template på onload og klone den:

<script type="text/javascript">
function appendRow() {
    var cT, oTr, aTr, oLnk, oBdy = document.getElementById("test").getElementsByTagName("tbody")[0];
    cT = document.createTextNode;
    oTr = oTempl.cloneNode("true");
    oBdy.appendChild(oTr);
    aTd = oTr.getElementsByTagName("td");
    aTd[0].getElementsByTagName("b")[0].firstChild.nodeValue = "sssss";
    oLnk = aTd[0].getElementsByTagName("a")[0];
    oLnk.lastChild.nodeValue = oBdy.getElementsByTagName("tr").length;
    aTd[0].lastChild.nodeValue = "Hello World!";
    aTd[1].firstChild.nodeValue = "Hell222o World!";
    if (oLnk.attachEvent) oLnk.attachEvent("onclick", function(){deleteLastRow(oBdy.getElementsByTagName("tr").length)});
    else if (oLnk.addEventListener) oLnk.addEventListener("click", function(){deleteLastRow(oBdy.getElementsByTagName("tr").length)}, false);
    else oLnk.onclick = function(){deleteLastRow(oBdy.getElementsByTagName("tr").length)};
}

function deleteLastRow(id) {
    var tbd = document.getElementById("test").getElementsByTagName("tbody")[0];
    if(!id) {
        if (tbd.getElementsByTagName("tr").length > 0) tbd.removeChild(tbd.lastChild);
    } else {
        tbd.removeChild(tbd.getElementsByTagName("tr")[id-1]);
    }
}

var oTempl = oBdy = null;
window.onload = function() {
    oTbl = document.getElementById("test");
    oBdy = oTbl.getElementsByTagName("tbody")[0];
    var aTr = oTbl.getElementsByTagName("tr");
    var oTr = aTr[aTr.length-1];
    oTempl = oTr.cloneNode(true);
    oTr.parentNode.removeChild(oTr);
    oTr = aTr = null;
}
</script>

<a href="#" onclick="appendRow()">aaaa</a> - <a href="#" onclick="deleteLastRow()">sssss</a>
<table id="test" border=1>
<tbody>
    <tr>
        <td>ssssssss</td>
        <td>asd</td>
    </tr>
    <tr>
        <td><a href="#"><b>&nbsp;</b>&nbsp;</a>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>
Avatar billede olebole Juniormester
01. september 2007 - 02:44 #7
PS: Grunden til at jeg ikke skriver onclick-handler'en i tagget, når jeg opretter en template, er, at IE opretter et lokalt script-scope, hvergang den opretter et element med en event-handler i hukommelsen.

Når elementet er indsat i DOM-træet - og event-handler'en dermed er del af det globale script-scope - frigøres det lokale scope desværre ikke fra hukommelsen.
Derfor bør event-handlers altid sættes, når noden/elementet er blevet indsat i sidens DOM-træ ... _aldrig_ før!
Avatar billede olebole Juniormester
01. september 2007 - 02:48 #8
I øvrigt lavede jeg en fejl i første script-eksempel. Jeg lagde antallet af rækker i en variabel, når funktionen kørte. Denne variabels værdi bliver der referet til, hvergang, event-handler'en fyres af ... men antallet af rækker varierer jo  ;o)

function appendRow() {
    var cE, cT, tbd, newRow, lnk, bld;
    cE = document.createElement;
    cT = document.createTextNode;
    tbd = document.getElementById("test").getElementsByTagName("tbody")[0];
    newRow = cE("tr");
    tbd.appendChild(newRow);
    newCell = cE("td");
    newRow.appendChild(newCell);
    lnk = cE("a");
    newCell.appendChild(lnk);
    lnk.setAttribute("href", "#");
    if (lnk.attachEvent) lnk.attachEvent("onclick", function(){deleteLastRow(tbd.getElementsByTagName("tr").length)});
    else if (lnk.addEventListener) lnk.addEventListener("click", function(){deleteLastRow(tbd.getElementsByTagName("tr").length)}, false);
    else lnk.onclick = function(){deleteLastRow(tbd.getElementsByTagName("tr").length)};
    bld = cE("b");
    lnk.appendChild(bld);
    bld.appendChild( cT("sssss") );
    lnk.appendChild( cT(tbd.getElementsByTagName("tr").length) );
    newCell.appendChild( cT("Hello World!") );
    newCell = cE("td");
    newRow.appendChild(newCell);
    newCell.appendChild( cT("Hell222o World!") );
}
Avatar billede olebole Juniormester
01. september 2007 - 02:52 #9
- og i eksemplet (01/09-2007 02:38:38) skal 'oBdy' fjernes i denne linje:

<script type="text/javascript">
function appendRow() {
    var cT, oTr, aTr, oLnk, oBdy = document.getElementById("test").getElementsByTagName("tbody")[0];

- der skal bare stå:

<script type="text/javascript">
function appendRow() {
    var cT, oTr, aTr, oLnk;

Vi har jo lige sat 'oBdy' på onload og gjort den global  ;o)
Avatar billede cmau Nybegynder
01. september 2007 - 09:16 #10
I andet eksempel hvor du sætte link på sssss som kommer med hver tr, hvad skal jeg så skrive i stedet for deleteLastRow(oBdy.getElementsByTagName("tr").length) for at få id'et på den man er i nu. Det var jo faktisk mit hoved problem, at jeg ikke kunne slette en af de midterste.
Avatar billede roenving Novice
22. september 2007 - 17:00 #11
olebole 01/09-2007 00:12:19

Hvordan kan du skrive, at vbscript er ecma-script ?-)

-- kan være at DOM-bindings i VBscript er det samme som i Jscript, men der er da godt nok liiiiiiiiiiiige en anelse mere en bindings ...

Kig evt. også i http://exp.dk/spm/666830 og http://exp.dk/spm/672130 !-)
Avatar billede olebole Juniormester
22. september 2007 - 17:43 #12
Sorry - det er naturligvis noget værre vrøvl! Det er selvfølgelig kun bindingerne, VBS overholder. Det er _kun_ JavaScript og JScript, der er ECMA-baseret  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester