Jeg har pt. dette script som kun virker i FF og kun hvis man tast <= 5 antal kolonner ind af gangen.
----------------------------------------------------------------------------
<html>
<style>
.tabel { width: 100%; }
</style>
<head>
<script type="text/javascript">
var c=0;
var draggin = false;
function CreateTable()
{
var num_c = document.getElementById("cols").value;
var td = new Array();
var dd = new Array();
var mother = document.getElementById("AppendHere");
var table = document.createElement("TABLE");
var tbody = document.createElement("TBODY");
var row = document.createElement("TR");
for(var i=0; i<(num_c*2); i+=2)
{
/* Creating all the cells */
td[i] = document.createElement("TD");
td[i].appendChild(document.createTextNode('hej'+(i+1)));
td[i].setAttribute("id", "cell_"+c+"_"+i);
row.appendChild(td[i]);
/*here creating all the div in between the cells to drag and drop */
td[(i+1)] = document.createElement("TD");
dd[(i+1)] = td[(i+1)].appendChild(document.createElement("DIV"));
dd[(i+1)].setAttribute("onmousemove", "startDrag(this.id, event.clientX);");
dd[(i+1)].setAttribute("onmousedown", "setDragTrue();");
dd[(i+1)].setAttribute("onmouseup", "setDragFalse();");
dd[(i+1)].setAttribute("onmouseover", "activeBg(this.id);");
dd[(i+1)].setAttribute("onmouseout", "inactiveBg(this.id);");
dd[(i+1)].setAttribute("style", "width: 2px; background-color: #000;");
dd[(i+1)].setAttribute("id", "drags_"+c+"_"+i);
dd[(i+1)].appendChild(document.createTextNode('|'));
row.appendChild(dd[(i+1)]);
}
/* Creating the rest of the <table> */
tbody.appendChild(row);
table.appendChild(tbody);
table.setAttribute("border", "1");
table.setAttribute("id", "table"+c);
mother.appendChild(table);
for(var i=0; i<=c; i++)
{
/* Setting all the <table> elements to className = "tabel" */
document.getElementById("table"+i).className = "tabel";
}
c++;
}
function activeBg(elm)
{
document.getElementById(elm).style.cursor = 'e-resize';
}
function inactiveBg(elm)
{
document.getElementById(elm).style.cursor = 'default';
}
function setDragTrue()
{
draggin = true;
}
function setDragFalse()
{
draggin = false;
}
function startDrag(elm, mx)
{
if(draggin)
{
var cell = document.getElementById('cell_'+elm[6]+'_'+elm[8]);
cell.style.width = (mx-cell.offsetLeft)-15 + "px";
}
}
</script>
</head>
<body>
<div id="AppendHere">
</div>
Cols: <input type="text" name="cols" id="cols" value="1" /><br />
<input type="button" value="Table it" onclick="CreateTable();" />
</body>
</html>
----------------------------------------------------------------------------
Jeg ved godt hvad der forårsager at det ikke virker i IE, og at det ikke virker med mere end 5 kolonner, så det er ikke det spørgsmålet går ud på.
Men som i kan se, har jeg næsten fået scriptet til at virke, dog på ingen måde optimalt.
Så vil høre om der er nogen der kan pointe mig i den rigtige retning til en bedre løsning.
