J
Joop
Hi all,
I'm working on a RTF-editor in JavaScript designMode, wich should be
cross-browser. So far, doing just fine...
But now I've come up with the following code for inserting tables in my
document:
--------------------------------------------------------------------------------------------------------------------
// Voegt tabel in in document.
function insertTable(tableRows, tableCols, tableFrame, tableRules,
tablePadding, tableSpacing, tableWidth, tableHeight) {
if(selectedDocument.selection) {
var range = selectedDocument.selection.createRange();
var item = (selectedDocument.selection.createRange().item) ?
selectedDocument.selection.createRange().item() : null;
var element = (range.parentElement) ? range.parentElement() : null;
}
if(selectedFrame.getSelection) {
var range = selectedFrame.getSelection().focusNode;
var item =
selectedFrame.getSelection().getRangeAt(0).startContainer.childNodes[selectedFrame.getSelection().getRangeAt(0).startOffset]
|| null;
var element = range.parentNode;
}
while(element.tagName != 'BODY' && element.tagName != 'TABLE') {
element = element.parentNode;
}
if(element.tagName == 'TABLE') {
element.rules = tableRules;
element.frame = tableFrame;
element.cellPadding = tablePadding;
element.cellSpacing = tableSpacing;
element.width = tableWidth;
if(tableWidth.substr((tableWidth.length - 1)) != '%') {
element.style.width = tableWidth;
}
element.height = tableHeight;
element.style.height = tableHeight;
var tableRowsTest = element.childNodes[0].childNodes.length;
var testRow = element.childNodes[0].childNodes[(tableRowsTest -
1)];
var tableColsTest = 0;
for(var i = 0; i < testRow.childNodes.length; i++) {
if(testRow.childNodes.getAttribute('Colspan')) {
tableColsTest += testRow.childNodes.getAttribute('Colspan');
} else {
tableColsTest += 1;
}
}
if(tableRows > tableRowsTest) {
loopRows = tableRows;
} else {
loopRows = tableRowsTest;
}
if(tableCols > tableColsTest) {
loopCols = tableCols;
} else {
loopCols = tableColsTest;
}
var removeRows = new Array();
var count = 0;
var removeCells = new Array();
var count2 = 0;
for(var i = 0; i < loopRows; i++) {
if(!element.childNodes[0].childNodes) {
var trow = selectedDocument.createElement("tr");
element.childNodes[0].appendChild(trow);
for(var j = 0; j < tableCols; j++) {
var tcell = selectedDocument.createElement("td");
trow.appendChild(tcell);
}
} else if (i >= tableRows) {
var loopJ = element.childNodes[0].childNodes.childNodes.length -
1;
for(var j = loopJ; j >= 0; j--) {
element.childNodes[0].childNodes.removeChild(element.childNodes[0].childNodes.childNodes[j]);
}
removeRows[count] = element.childNodes[0].childNodes;
count++;
} else {
for(var j = 0; j < loopCols; j++) {
if(j < tableCols) {
if(!element.childNodes[0].childNodes.childNodes[j]) {
var tcell = selectedDocument.createElement("td");
element.childNodes[0].childNodes.appendChild(tcell);
}
} else {
if(element.childNodes[0].childNodes.childNodes[j]) {
removeCells[count2] = i;
count2++;
}
}
}
}
}
for(var i = 0; i < removeCells.length; i++) {
var parentItem = element.childNodes[0].childNodes[removeCells];
var childAmount = parentItem.childNodes.length - 1;
var childItem = parentItem.childNodes[childAmount];
parentItem.removeChild(childItem);
}
for(var i = 0; i < removeRows.length; i++) {
element.childNodes[0].removeChild(removeRows);
}
} else {
var table = selectedDocument.createElement("table");
table.border = 1;
table.frame = tableFrame;
table.rules = tableRules;
table.cellPadding = tablePadding;
table.cellSpacing = tableSpacing;
table.width = tableWidth;
if(tableWidth.substr((tableWidth.length - 1)) != '%') {
table.style.width = tableWidth;
}
table.height = tableHeight;
table.style.height = tableHeight;
var tbody = selectedDocument.createElement("tbody");
for(var i = 0; i < tableRows; i++) {
var trow = selectedDocument.createElement("tr");
for(var j = 0; j < tableCols; j++) {
var tcell = selectedDocument.createElement("td");
trow.appendChild(tcell);
}
tbody.appendChild(trow);
}
table.appendChild(tbody);
element.appendChild(table);
}
}
-------------------------------------------------------------------------------------------------------------
Works quite well, but mozilla won't let me type in the created
tablecells. Also I'm wondering if theres a way to get rid of those
silly "handles" wich allow me to create / remove tablecells.
Can anyone help on both of the topics?!?
Thanks in advance,
Joop.
I'm working on a RTF-editor in JavaScript designMode, wich should be
cross-browser. So far, doing just fine...
But now I've come up with the following code for inserting tables in my
document:
--------------------------------------------------------------------------------------------------------------------
// Voegt tabel in in document.
function insertTable(tableRows, tableCols, tableFrame, tableRules,
tablePadding, tableSpacing, tableWidth, tableHeight) {
if(selectedDocument.selection) {
var range = selectedDocument.selection.createRange();
var item = (selectedDocument.selection.createRange().item) ?
selectedDocument.selection.createRange().item() : null;
var element = (range.parentElement) ? range.parentElement() : null;
}
if(selectedFrame.getSelection) {
var range = selectedFrame.getSelection().focusNode;
var item =
selectedFrame.getSelection().getRangeAt(0).startContainer.childNodes[selectedFrame.getSelection().getRangeAt(0).startOffset]
|| null;
var element = range.parentNode;
}
while(element.tagName != 'BODY' && element.tagName != 'TABLE') {
element = element.parentNode;
}
if(element.tagName == 'TABLE') {
element.rules = tableRules;
element.frame = tableFrame;
element.cellPadding = tablePadding;
element.cellSpacing = tableSpacing;
element.width = tableWidth;
if(tableWidth.substr((tableWidth.length - 1)) != '%') {
element.style.width = tableWidth;
}
element.height = tableHeight;
element.style.height = tableHeight;
var tableRowsTest = element.childNodes[0].childNodes.length;
var testRow = element.childNodes[0].childNodes[(tableRowsTest -
1)];
var tableColsTest = 0;
for(var i = 0; i < testRow.childNodes.length; i++) {
if(testRow.childNodes.getAttribute('Colspan')) {
tableColsTest += testRow.childNodes.getAttribute('Colspan');
} else {
tableColsTest += 1;
}
}
if(tableRows > tableRowsTest) {
loopRows = tableRows;
} else {
loopRows = tableRowsTest;
}
if(tableCols > tableColsTest) {
loopCols = tableCols;
} else {
loopCols = tableColsTest;
}
var removeRows = new Array();
var count = 0;
var removeCells = new Array();
var count2 = 0;
for(var i = 0; i < loopRows; i++) {
if(!element.childNodes[0].childNodes) {
var trow = selectedDocument.createElement("tr");
element.childNodes[0].appendChild(trow);
for(var j = 0; j < tableCols; j++) {
var tcell = selectedDocument.createElement("td");
trow.appendChild(tcell);
}
} else if (i >= tableRows) {
var loopJ = element.childNodes[0].childNodes.childNodes.length -
1;
for(var j = loopJ; j >= 0; j--) {
element.childNodes[0].childNodes.removeChild(element.childNodes[0].childNodes.childNodes[j]);
}
removeRows[count] = element.childNodes[0].childNodes;
count++;
} else {
for(var j = 0; j < loopCols; j++) {
if(j < tableCols) {
if(!element.childNodes[0].childNodes.childNodes[j]) {
var tcell = selectedDocument.createElement("td");
element.childNodes[0].childNodes.appendChild(tcell);
}
} else {
if(element.childNodes[0].childNodes.childNodes[j]) {
removeCells[count2] = i;
count2++;
}
}
}
}
}
for(var i = 0; i < removeCells.length; i++) {
var parentItem = element.childNodes[0].childNodes[removeCells];
var childAmount = parentItem.childNodes.length - 1;
var childItem = parentItem.childNodes[childAmount];
parentItem.removeChild(childItem);
}
for(var i = 0; i < removeRows.length; i++) {
element.childNodes[0].removeChild(removeRows);
}
} else {
var table = selectedDocument.createElement("table");
table.border = 1;
table.frame = tableFrame;
table.rules = tableRules;
table.cellPadding = tablePadding;
table.cellSpacing = tableSpacing;
table.width = tableWidth;
if(tableWidth.substr((tableWidth.length - 1)) != '%') {
table.style.width = tableWidth;
}
table.height = tableHeight;
table.style.height = tableHeight;
var tbody = selectedDocument.createElement("tbody");
for(var i = 0; i < tableRows; i++) {
var trow = selectedDocument.createElement("tr");
for(var j = 0; j < tableCols; j++) {
var tcell = selectedDocument.createElement("td");
trow.appendChild(tcell);
}
tbody.appendChild(trow);
}
table.appendChild(tbody);
element.appendChild(table);
}
}
-------------------------------------------------------------------------------------------------------------
Works quite well, but mozilla won't let me type in the created
tablecells. Also I'm wondering if theres a way to get rid of those
silly "handles" wich allow me to create / remove tablecells.
Can anyone help on both of the topics?!?
Thanks in advance,
Joop.