Avatar billede sz Nybegynder
31. januar 2004 - 13:38 Der er 14 kommentarer

Indsæt række/kolonne i tabel

Jeg har lavet et lille script som indsætter en tabel i en DIV boks, nu vil jeg så gerne have sådan man har mulighed for at indsætte/fjerne rækker og kolonner i tabellen bagefter. Svaret behøver ikke være fuldstændigt med kode, bare jeg får nogle ideer til hvordan jeg kan løse det, for lige nu er jeg rimelig blank :)

På forhånd tak!

Funktionen til indsættelse af tabel er følgende:

function doTable()
    {
        var border = document.getElementById("txtBorder").value;    //Henter border værdien fra dialogen
        var row = document.getElementById("txtRow").value;            //Henter antal rækker fra dialogen
        var column = document.getElementById("txtColumn").value;    //Henter antal kolonner fra dialogen
       
        tekstFelt.focus();
        tableString = "<br><table align='center' width='80%' cellpadding='0' cellspacing='1' style='border:" + border + "px solid black;'>";    //Start string
       
        for(i=1; i<=row; i++)    //Kører løkken for hver række
        {
            tableString += "<tr>";
           
            for(n=1; n<=column; n++)    //Kører løkken for hver kolonne
            {
                tableString += "<td style='border:" + border + "px solid black'></td>";
            }
           
            tableString += "</tr>";
        }

        tableString += "</table><br>";     //Slut string
        tekstFelt.document.selection.createRange().pasteHTML(tableString);        //Indsætter tabellen
        hideTable();        //Gemmer tabel-dialogboksen
    }
Avatar billede roenving Novice
31. januar 2004 - 14:22 #1
Hvis du giver din tabel et id, kan du bruge .appendChild-metoden til at indsætte nye tale-rows til sidst og .insertBefore til at indsætte inde i, hvis du har fat i elementet, som skal sidde lige efter.
Avatar billede sz Nybegynder
31. januar 2004 - 14:30 #2
Ok, kigger lige på det!
Avatar billede sz Nybegynder
31. januar 2004 - 14:37 #3
Jeg har brugt appendChild på følgende måde:

var item1 = document.createElement("TR")
document.getElementByID("table1").appendChild(item1)

men det fungerer ikke helt optimalt, hvor/hvordan skal jeg bruge insertBefore?
Avatar billede roenving Novice
31. januar 2004 - 14:43 #4
Ved at have fat i elementet, som det skal sidde før ...

Jeg skulle da også lige vide, hvad der skete, så jeg har:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>

<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/459350">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table{
border:1px solid #ddd;
}
tr{
border:1px dotted #aaa;
}
td{
margin:0px;
padding:0px;
border:1px solid blue;
}
</style>
<script language="javascript" type="text/javascript">
var r = 0, cells = new Array();
function insertTable(elm){
var t = document.createElement('TABLE');
elm.appendChild(t);
t.style.width = "400px";
t.id = "myTable";
}
function insertTableRow(elm){
var t = document.createElement('TR');
elm.appendChild(t);
t.style.width = "400px";
cells[r] = new Array();
cells[r] = 0;
t.id = "myRow" + r++;
}
function insertTableCell(elm){
var t = document.createElement('TD');
elm.appendChild(t);
rownum = elm.id.match(/\d+$/);
t.style.width = "100px";
t.style.height = "50px";
t.id = "myCellR" + rownum + "C" + cells[rownum]++;
t.innerHTML = t.id;
document.getElementById('myDiv').normalize;
}
</script>

<script language="javascript" type="text/javascript" src="tom.js"></script>

</head>

<body onresize onload>
<br>
<div id="myDiv">En div-tekst</div>
<button onclick="insertTable(document.getElementById('myDiv'))">Indsæt tabel</button>
<button onclick="insertTableRow(document.getElementById('myTable'))">Indsæt række</button>
<button onclick="insertTableCell(document.getElementById('myRow'+(r-1)))">Indsæt celle</button>

</body>
</html>
Avatar billede roenving Novice
31. januar 2004 - 14:47 #5
PS. Jeg er ikke nået dertil, at det virker i IE, foreløbig er det kun Mozilla, som helt uden problemer tager den ...
Avatar billede sz Nybegynder
31. januar 2004 - 14:48 #6
ahh derfor den ikke indsætter en tabel her.
Avatar billede sz Nybegynder
31. januar 2004 - 15:02 #7
Det skal virke i IE - desværre :) Jeg har selv kodet lidt videre og er kommet frem til følgende:

function insertRow()
    {
        var table1 = document.getElementById("table1");
        var row1 = table1.insertRow(0);
        var cell1;
        var numberCols = 2;        //Snavs!!
       
        for (var loopIndex = 0; loopIndex < numberCols; loopIndex++)
        {
            cell1 = row1.insertCell(loopIndex);
            cell1.innerHTML = "Indsat række";
        }
    }

Her er numberCols antallet af kolonner, men det er jo hardcodet hvilket er noget snavs. Så nu er problemet at finde antal kolonner i den pågældende tabel. Antal rækker kan jeg finde vha. .rows.length.
Avatar billede sz Nybegynder
31. januar 2004 - 15:26 #8
Fandt lige et eksempel, men det virker kun ved en IFrame og ikke en DIV.

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//NO"-->
<html>
<head>
<title>Admino Table Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
a:link {font-family: Arial, Helvetica, sans-serif;font-size: 13px;
text-decoration: none;color: #0066CC;
}
a:visited {font-family: Arial, Helvetica, sans-serif;font-size: 13px;
text-decoration: none;color: #0066CC;
}
--></style>
</head>
<script>

/*This table editor script is made by Petter Sundnes
It is free for anyone to use for anything.
################################################################
Should work in IE 4 / Windows9X and above.
Code is given as is, no waranty included. Use at own risk.
################################################################
Additions or change to the code can be sent to post@petter.ms*/

    function insertTable()
    {
        content.focus();
        tableString = "<br><table width='100%' border='4' cellpadding='0' cellspacing='0'>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr></table><br>";
        content.document.selection.createRange().pasteHTML(tableString);
    }

    function initEditor()
    {
        content.document.designMode = 'On';
        content.document.onmouseup = function()
        {
            getTableInfo();
        }
    }

var isTable;
var currTable;
var rowCount;
var currRow;
var colCount;
var currCol;

function getTableInfo(){
isTable = false;
rowCount = 0;
currRow = 0;
colCount = 0;
currCol = 0;
var currElement = content.event.srcElement;
if(currElement.tagName == 'TD'){
  isTable = true;
var currCell = currElement.sourceIndex;
var currTableTagNr = 0;
for(i=currCell; currCell >= 0; i--){
  if(content.document.all[i].tagName == 'TABLE'){
  currTable = content.document.all[i];
  currTableTagNr = i;
  break;
  }
}
var lastCell = 0;
for(i=currCell; i < content.document.all.length; i++){
  if(content.document.all[i].tagName == 'TD')
  lastCell = i;
  if(content.document.all[i].tagName == 'TABLE')
  break;
}
for(i = currTableTagNr+2; i < lastCell; i++){
  var tagName = content.document.all[i].tagName;
  if(tagName == 'TR')
  rowCount += 1;
}
for(i=currCell; i >= currTableTagNr; i--){
  var tagName = content.document.all[i].tagName;
  if(tagName == 'TR')
  currRow += 1;
}
for(i=currCell; i >= currTableTagNr; i--){
  if(parent.content.document.all[i].tagName == 'TR')
  break;
  if(parent.content.document.all[i].tagName == 'TD')
  currCol += 1;
}
for(i = currTableTagNr+3; i < lastCell; i++){
  if(parent.content.document.all[i].tagName != 'TD')
  break;
  if(parent.content.document.all[i].tagName == 'TD')
  colCount += 1;
}
}
//alert(rowCount + "," + colCount + ",");
}

function insertRowBefore()
{
    content.focus();
    if(isTable)
    {
        var newRow = currTable.insertRow(currRow-1);
       
        for(i = 0; i < colCount; i++)
        {
              newCell = newRow.insertCell(i);
              newCell.innerText=' ';
        }
       
    rowCount += 1;
    currRow += 1;
    currCell += 1;
    }
}

function insertRowAfter(){
content.focus();
if(isTable){
var newRow = currTable.insertRow(currRow);
for(i = 0; i < colCount; i++){
  newCell = newRow.insertCell(i);
  newCell.innerText=' ';
}
rowCount += 1;
}
}

function deleteRow(){
content.focus();
if(isTable){
currTable.deleteRow(currRow-1);
rowCount -= 1;
}
}

function insertColBefore(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++){
  newCell = currTable.rows[i].insertCell(currCol-1);
  newCell.innerText=' ';
}
colCount += 1;
currCol += 1;
currCell += 1;
}
}

function insertColAfter(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++){
  newCell = currTable.rows[i].insertCell(currCol);
  newCell.innerText=' ';
}
colCount += 1;
}
}

function deleteCol(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++)
  currTable.rows[i].deleteCell(currCol-1);
colCount -= 1;
}
}

function doCommand(param1,param2,param3){
  content.focus();
  content.document.execCommand(param1,param2,param3);
}

</script>

<body onLoad="initEditor();" bgcolor="#CCCCCC">

<table width="744" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="144" valign="top">
  <a href="java script:doCommand('Copy');">Copy</a><br>
  <a href="java script:doCommand('Cut');">Cut</a><br>
  <a href="java script:doCommand('Paste');">Paste</a><br>
  <a href="java script:doCommand('Undo');">Undo</a><br>
  <a href="java script:doCommand('Redo');">Redo</a><br>
  <a href="java script:doCommand('InsertImage', true);">Image Settings</a><br>
  <a href="java script:doCommand('CreateLink');">Create Link</a>
  <hr>
  <a href="java script:doCommand('FontName','false','Arial,Helvetica,sans-serif');">Arial</a><br>
  <a href="java script:doCommand('FontName','false','Times New Roman,Times,serif');">Times</a><br>
  <a href="java script:doCommand('Bold');">Bold</a><br>
  <a href="java script:doCommand('Italic');">Italic</a>
  <hr>
  <a href="java script:doCommand('InsertUnorderedList');">Unordered List</a><br>
  <a href="java script:doCommand('InsertOrderedList');">Ordered List</a><br>
  <a href="java script:doCommand('Indent');">Indent</a><br>
  <a href="java script:doCommand('Outdent');">Outdent</a><br>
  <a href="java script:doCommand('JustifyLeft');">Justify Left</a><br>
  <a href="java script:doCommand('JustifyCenter');">Justify Center</a><br>
  <a href="java script:doCommand('JustifyRight');">Justify Right</a>
  <hr>
  <a href="java script:doCommand('fontsize','',1);">Small Text</a><br>
  <a href="java script:doCommand('fontsize','',2);">Medium Text</a><br>
  <a href="java script:doCommand('fontsize','',3);">Large Text</a><br>
  <a href="java script:doCommand('fontsize','',4);">Extra Large Text</a><br>
  <a href="java script:doCommand('ForeColor','false','red');">Red Text</a><br>
  <a href="java script:doCommand('ForeColor','false','green');">Green Text</a><br>
  <a href="java script:doCommand('ForeColor','false','black');">Black Text</a>
  <hr>
  <a href="java script:insertTable();">Insert Table</a><br>
  <a href="java script:insertRowBefore();">Insert Row Before</a><br>
  <a href="java script:insertRowAfter();">Insert Row After</a><br>
  <a href="java script:deleteRow();">Delete Row</a><br>
  <a href="java script:insertColBefore();">Insert Coloumn Before</a><br>
  <a href="java script:insertColAfter();">Insert Coloumn After</a><br>
  <a href="java script:deleteCol();">Delete Coloumn</a>
</td>
<td width="600" valign="top">
  <iframe id="content" src="" height="100%" border=0 frameborder="0" marginheight=0 marginwidth=0
  scrolling=AUTO noresize width="100%"></iframe>
</td>
</tr>
</table>

</body>
</html>
Avatar billede roenving Novice
31. januar 2004 - 15:29 #9
-- og jeg fandt ud af, at IE _altid_ sætter en tbody ind, så nu virker den simple:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Tomt dokument</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/459350">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table{border:1px solid #ddd;}
tr{border:1px dotted #aaa;}
td{margin:0px;padding:0px;border:1px solid blue;}
</style>
<script language="javascript" type="text/javascript">
var r = 0, cells = new Array();//cells[0]=0;
function insertTable(elm){
var t = document.createElement('TABLE');
elm.appendChild(t);
t.style.width = "400px";
t.id = "myTable";
t.appendChild(document.createElement('TBODY'))}
function insertTableRow(elm){
var t = document.createElement('TR');
elm.appendChild(t);
//t.style.width = "400px";
cells[r] = 0;
t.id = "myRow" + r++;}
function insertTableCell(elm,but){
rownum = elm.id.match(/\d+$/);
var t = document.createElement('TD');
t.style.width = "100px";
t.style.height = "50px";
t.id = "myCellR" + rownum + "C" + cells[rownum]++;
t.innerHTML = t.id;
elm.appendChild(t);
but.disabled=false;}
</script>
</head>
<body onresize onload>
<div id="myDiv">
</div>
<button onclick="insertTable(document.getElementById('myDiv'))">Indsæt tabel</button>
<button onclick="insertTableRow(document.getElementById('myTable').firstChild)">Indsæt række</button>
<button onclick="this.disabled=true;insertTableCell(document.getElementById('myRow'+(r-1)),this);">Indsæt celle</button><br>
<button onclick="alert(document.body.parentNode.outerHTML)">Vis HTML-kode</button>
</body>
</html>
Avatar billede sz Nybegynder
31. januar 2004 - 15:45 #10
Tak for hjælpen roenving! Den funktionalitet jeg leder efter er dog mere som det eksempel jeg pastede. Men det virker ikke på et DIV element, så vidt jeg kan se er det "var currElement = content.event.srcElement;" den er gal med. srcElement virker åbenbart ikke på DIV. Jeg skal vel bare have objectet som man sidst har klikket på. Nogen forslag?
Avatar billede roenving Novice
31. januar 2004 - 16:20 #11
Jeg tror at du får den, hvis du i Peter Sundnes' erstatter linjer af typen:

  if(parent.content.document.all[i].tagName != 'TD')

med

  if(content.all[i].tagName != 'TD')
Avatar billede sz Nybegynder
31. januar 2004 - 16:46 #12
det virker desværre ikke
Avatar billede roenving Novice
31. januar 2004 - 17:53 #13
Jeg kom et stykke af vejen, mon ikke du selv kan tage over ?-)

(desværre hele koden, for der var en del småting mange steder i koden, som skulle konsekvens-rettes !-)

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//NO"-->
<html>
<head>
<title>Admino Table Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
a:link {font-family: Arial, Helvetica, sans-serif;font-size: 13px;
text-decoration: none;color: #0066CC;
}
a:visited {font-family: Arial, Helvetica, sans-serif;font-size: 13px;
text-decoration: none;color: #0066CC;
}
--></style>
</head>
<script>

/*This table editor script is made by Petter Sundnes
It is free for anyone to use for anything.
################################################################
Should work in IE 4 / Windows9X and above.
Code is given as is, no waranty included. Use at own risk.
################################################################
Additions or change to the code can be sent to post@petter.ms
Modifying for support of DIV-tag startet by roenving 2004-01-31
*/

    function insertTable()
    {
        tableString = "<br><table width='100%' border='4' cellpadding='0' cellspacing='0'>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr>";
        tableString += "<tr><td> </td><td> </td><td> </td></tr></table><br>";
        sel = document.selection.createRange();
        if(sel.text==""){
          content.innerHTML += tableString;
        }else{
          sel.pasteHTML(tableString);
        }
    }

    function initEditor()
    {
        //content.contenteditable = "contenteditable";
        content.onmouseup = function()
        {
            getTableInfo();
        }
        content.focus();
    }

var isTable;
var currTable;
var rowCount;
var currRow;
var currCell;
var colCount;
var currCol;

function getTableInfo(){
isTable = false;
rowCount = 0;
currRow = 0;
colCount = 0;
currCol = 0;
var currElement = event.srcElement;
if(currElement.tagName == 'TD'){
  isTable = true;
var currCell = currElement.sourceIndex;
var currTableTagNr = 0;
for(i=currCell; currCell >= 0; i--){
  if(document.all[i].tagName == 'TABLE'){
  currTable = document.all[i];
  currTableTagNr = i;
  break;
  }
}
var lastCell = 0;
for(i=currCell; i < document.all.length; i++){
  if(document.all[i].tagName == 'TD')
  lastCell = i;
  if(document.all[i].tagName == 'TABLE')
  break;
}
for(i = currTableTagNr+2; i < lastCell; i++){
  var tagName = document.all[i].tagName;
  if(tagName == 'TR')
  rowCount += 1;
}
for(i=currCell; i >= currTableTagNr; i--){
  var tagName = document.all[i].tagName;
  if(tagName == 'TR')
  currRow += 1;
}
for(i=currCell; i >= currTableTagNr; i--){
  if(document.all[i].tagName == 'TR')
  break;
  if(document.all[i].tagName == 'TD')
  currCol += 1;
}
for(i = currTableTagNr+3; i < lastCell; i++){
  if(document.all[i].tagName != 'TD')
  break;
  if(document.all[i].tagName == 'TD')
  colCount += 1;
}
}
//alert(rowCount + "," + colCount + ",");
}

function insertRowBefore()
{
    content.focus();
    if(isTable)
    {
        var newRow = currTable.insertRow(currRow-1);
       
        for(i = 0; i < colCount; i++)
        {
              newCell = newRow.insertCell(i);
              newCell.innerText=' ';
        }
//alert(rowCount + "," + currRow + "," + currCell);
       
    rowCount += 1;
    currRow += 1;
    currCell += 1;
    }
}

function insertRowAfter(){
content.focus();
if(isTable){
var newRow = currTable.insertRow(currRow);
for(i = 0; i < colCount; i++){
  newCell = newRow.insertCell(i);
  newCell.innerText=' ';
}
rowCount += 1;
}
}

function deleteRow(){
content.focus();
if(isTable){
currTable.deleteRow(currRow-1);
rowCount -= 1;
}
}

function insertColBefore(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++){
  newCell = currTable.rows[i].insertCell(currCol-1);
  newCell.innerText=' ';
}
colCount += 1;
currCol += 1;
currCell += 1;
}
}

function insertColAfter(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++){
  newCell = currTable.rows[i].insertCell(currCol);
  newCell.innerText=' ';
}
colCount += 1;
}
}

function deleteCol(){
content.focus();
if(isTable){
for(i = 0; i < rowCount; i++)
  currTable.rows[i].deleteCell(currCol-1);
colCount -= 1;
}
}

function doCommand(param1,param2,param3){
  content.focus();
  document.execCommand(param1,param2,param3);
}

</script>

<body onload="initEditor()" bgcolor="#CCCCCC">

<table width="744" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="144" valign="top">
  <a href="java script:doCommand('Copy');">Copy</a><br>
  <a href="java script:doCommand('Cut');">Cut</a><br>
  <a href="java script:doCommand('Paste');">Paste</a><br>
  <a href="java script:doCommand('Undo');">Undo</a><br>
  <a href="java script:doCommand('Redo');">Redo</a><br>
  <a href="java script:doCommand('InsertImage', true);">Image Settings</a><br>
  <a href="java script:doCommand('CreateLink');">Create Link</a>
  <hr>
  <a href="java script:doCommand('FontName','false','Arial,Helvetica,sans-serif');">Arial</a><br>
  <a href="java script:doCommand('FontName','false','Times New Roman,Times,serif');">Times</a><br>
  <a href="java script:doCommand('Bold');">Bold</a><br>
  <a href="java script:doCommand('Italic');">Italic</a>
  <hr>
  <a href="java script:doCommand('InsertUnorderedList');">Unordered List</a><br>
  <a href="java script:doCommand('InsertOrderedList');">Ordered List</a><br>
  <a href="java script:doCommand('Indent');">Indent</a><br>
  <a href="java script:doCommand('Outdent');">Outdent</a><br>
  <a href="java script:doCommand('JustifyLeft');">Justify Left</a><br>
  <a href="java script:doCommand('JustifyCenter');">Justify Center</a><br>
  <a href="java script:doCommand('JustifyRight');">Justify Right</a>
  <hr>
  <a href="java script:doCommand('fontsize','',1);">Small Text</a><br>
  <a href="java script:doCommand('fontsize','',2);">Medium Text</a><br>
  <a href="java script:doCommand('fontsize','',3);">Large Text</a><br>
  <a href="java script:doCommand('fontsize','',4);">Extra Large Text</a><br>
  <a href="java script:doCommand('ForeColor','false','red');">Red Text</a><br>
  <a href="java script:doCommand('ForeColor','false','green');">Green Text</a><br>
  <a href="java script:doCommand('ForeColor','false','black');">Black Text</a>
  <hr>
  <a href="java script:insertTable();">Insert Table</a><br>
  <a href="java script:insertRowBefore();">Insert Row Before</a><br>
  <a href="java script:insertRowAfter();">Insert Row After</a><br>
  <a href="java script:deleteRow();">Delete Row</a><br>
  <a href="java script:insertColBefore();">Insert Coloumn Before</a><br>
  <a href="java script:insertColAfter();">Insert Coloumn After</a><br>
  <a href="java script:deleteCol();">Delete Coloumn</a>
</td>
<td width="600" valign="top" style="position:relative;top:0px;left:0px;">
  <div id="content" contenteditable style="height:100%;border:1px solid red;margin:0;width:100%;"></div>
</td>
</tr>
</table>

</body>
</html>
Avatar billede sz Nybegynder
31. januar 2004 - 18:05 #14
Det er helt fint roenving, takker mange gange. Hvordan giver jeg dig point? :)
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