Infoga tabell i div

Hej!

Jag har gjort en jätteenkel WYSIWYG editor som använder sig av en div med "contenteditable=true" och MS kommandon "commandExec" för att få formatering på texten.

Nu undrar jag om det finns nåt bra sätt för att kunna infoga en tabell utan ram i sin div för att använda i editorn?

Jag har sett det på andra editorer, men vet inte hur dom lyckats...

Så här kan du lägga till en tabell t.ex.:

function insertTable (parent, rows, cols) {
    var table = document.createElement ("TABLE");
    var tbody = document.createElement ("TBODY");
    var tr = [], td = [];

    for (var i = 0; i < rows; i++) {
        tr[i] = document.createElement ("TR");
        td[i] = [];

        for (var j = 0; j < cols; j++) {
            td[i][j] = document.createElement ("TD");
            td[i][j].innerHTML = i + ":" + j;
            tr[i].appendChild (td[i][j]);
        }

        tbody.appendChild (tr[i]);
    }

    table.appendChild (tbody);
    parent.appendChild (table);
}

parent är en referens till det element du vill ha tabell i, i ditt fall diven med attributet editableContent = true, rows är antal rader i tabellen och cols är antal kolumner i varje rad. Tabellens border kan du ändra med css, t.ex.:

div#editable-content table {
  border: 0;
  border-collapse: collapse;
}

Får objektet stödjer inte egenskapen...vad har jag gjort för fel?

<style>
div#contenteditable table {
  border: 0;
  border-collapse: collapse;
}
</style>
<script>
function insertTable (parent, rows, cols) {
    var table = document.createElement ("TABLE");
    var tbody = document.createElement ("TBODY");
    var tr = [], td = [];

    for (var i = 0; i < rows; i++) {
        tr[i] = document.createElement ("TR");
        td[i] = [];

        for (var j = 0; j < cols; j++) {
            td[i][j] = document.createElement ("TD");
            td[i][j].innerHTML = i + ":" + j;
            tr[i].appendChild (td[i][j]);
        }

        tbody.appendChild (tr[i]);
    }

    table.appendChild (tbody);
    parent.appendChild (table);
}
</script>

<div style="border:1px solid black;height:200px;width:200px;" id="test1" name="test1" contenteditable=true>test</div>
<input type="button" value="test1" onclick="insertTable('test1',2,2);">

Tar jag bort fnuttarna på test1 och trycker på knappen visas det här i div-en:

test
0:0 0:1 
1:0 1:1

td*[j].innerHTML = i + ":" + j; var förresten något jag slängde in för att se så att det funkade, så det kan du ta bort. Om du skickar med "test1" som argument så skickar du inte en referens till diven, vilket du gör om du skriver skickar med test1 utan fnuttar (i alla fall i IE vad jag vet). Hur som helst så ska du byta ut "test1" i din kod mot document.getElementById("test1") ta bort td*[j].innerHTML = i + ":" + j; så funkar det, men tänk på att tabellen inte syns alls då eftersom det inte finns någon border.**

Nu känner jag mig riktigt trög....

Vart ska jag lägga in:

document.getElementById("test1")

...och vad är det för skillnad med detta sätt mot att skriva:

test1.innerHTML = test1.innerHTML + "<table border=1><tr><td></td></tr></table>";

förutom att man med din kod kan bestämma cols, rows.

Vad jag vill är att man likt html-editorer får en streckad linje runt tabellen, så man se vart den är...men som sen inte kommer att synas i sidan.

Nån som vet hur man lyckas med sånt?

border: 1px dashed #ccc; fixar du bordern med. När man senare använder det som är skapat med din wysiwyg-sida så är det bara att ha en anna stil. <input type="button" value="test1" onclick="insertTable(document.getElementById('test1'),2,2);"/> skriver du så blir det rätt. Angående frågan där du undrar vad det är för skillnad på att använda document.createElement eller att bara använda innerHTML så är det ju såklart ingen. Det är väl en smaksak hur man väljer att göra. Personligen gillar jag att tänka mig elementen som objekt och tycker därför att det blir lättare och snyggare i koden om man gör som jag gjorde i mitt exempel.

*weee* Funkar kanon

Cheguelin
Fantastiskt mycket tack för ditt tålamod och dina förklaringar! :birp

Oppps! En fråga till bara ;)
Hur kan man sätta tabellen vänsterställd?
align=left

Jo, man sätter:var table = document.createElement ("<table align=left>");

såklart!

I din stilmall skriver du text-align: left;, fast det är den ju by default.

table td {
  text-align: left;
}

jag skulle vilja få hela tabellen till vänster, så jag kan infoga 2 tabeller i rad...

om inte det går, hur ska man göra för att kunna dela celler eller sammanfoga dessa?

Hur kan man infoga "<td></td>" där man ställer markören?
jag får dom sist i rutan när jag försöker infoga en cell