9 svar · 383 visningar · startad av voigtann1
Går det att skapa <table> och sånt med hjälp av ExecCommand och designMode??
frames.message.document.execCommand('paste', true, '<table>');
Något sånt tror jag ska fungera. Jag skulle vilja ha:
att man öppnar ett nytt fönster där två select boxar samt en submit knapp finns där man kan välja:
Border bredd på tabellen, hur många TR och TD det ska finnas... kan någon göra ett sådant script? är det svårt?
Kan man inte göra någon loop med TR och TD... jag har noll koll på hur javascript fungera med sånt här 
voigtann1, du behöver inte blanda in execCommand för det där. Använd document.createElement så funkar det fint. Du kan läsa mer om detta på bl a msdn.
Behöver väll ändå någon funktions kod som "ritar" upp tabellerna?
Berätta hur du vill att det ska vara så kan jag ge dig en funktion för att rita upp tabellerna.
Jag har en iframe som heter message och som är editable = on
Jag vill ha en popup som öppnas där man kan skriva hur många rader och hur många TD man ska ha tex:
TD [INPUT]
TR [INPUT]
BORDER [INPUT]
[SUBMIT]
Om vi har skrivit 5 på TD och 2 på TR och border 0 så ska den skriva:
<table border=0>
<tr>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
</tr>
<tr>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
<td>Mellanslag</td>
</tr>
</table>
Aha, jag har inte läst så noggrant. Du gör typ en WYSIWYG-editor där användaren ska få lägga in en table?
ja något sånt...
Nu är jag klar med det.
Sidan med WYSIWYG-editorn (wysiwyg.html):
<html>
<head>
<title>
WYSIWYG
</title>
<script type="text/javascript">
window.onload = function() {
message.document.designMode = "On";
}
function openPopup(url, sName, height, width) {
var leftSubtrahend = 5;
var topSubtrahend = 15;
var left = (window.screen.width - width) / 2 - leftSubtrahend;
var top = (window.screen.height - height) / 2 - topSubtrahend;
window.open(url, sName, "channelmode=no, directories=no," +
"fullscreen=no, height=" + height + ", left=" + left +
", menubar=no, resizable=no, scrollbars=no, status=no," +
"titlebar=no, toolbar=no, top=" + top + ", width=" + width);
}
</script>
</head>
<body>
<p>
<iframe id="message">
</iframe>
</p>
<p>
<a href="tableForm.html"
onclick='openPopup("tableForm.html", "tableForm", 300, 200); return false;'>
Lägg till tabell
</a>
</p>
</body>
</html>
Sidan med formuläret (tableForm.html):
<html>
<head>
<title>
Add table
</title>
<script type="text/javascript">
function addTable(rows, cols, border) {
var table = window.opener.message.document.createElement(
"<table border=" + border + ">");
var tbody = window.opener.message.document.createElement("tbody");
for (var r = 0; r < rows; r++) {
var tr = window.opener.message.document.createElement("tr");
for (var c = 0; c < cols; c++) {
var td = window.opener.message.document.createElement("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
window.opener.message.document.body.appendChild(table);
}
</script>
</head>
<body>
<form onsubmit="addTable(this.rows.value, this.cols.value,
this.border.value); window.close(); return false;">
<p>
Kantstorlek:<br />
<input name="border" type="text" />
</p>
<p>
Rader:<br />
<input name="rows" type="text" />
</p>
<p>
Kolumner:<br />
<input name="cols" type="text" />
</p>
<p>
<input type="submit"
value="Lägg till!" />
</p>
</form>
</body>
</html>
Använd er gärna utav detta, förutsatt att det endast är för privat bruk. Vill ni använda er av det för kommersiellt bruk så förväntar jag mig en ersättning.
Lycka till!