Hi,
ich habe ein kleines Skript welches es dem Benutzer erlauben soll selbst Elemente erster Ebene und Elemente zweiter Ebene anzulegen.
- L1
--L1.1
--L1.2
L 2
--L2.2
usw.
Ich habe mir dafür folgendes aufgebaut (statischer Auszug zum testen):
Das Problem, dass ich nun habe besteht darin, dass wenn ich ein Element zweiter Ebene Hinzufüge, wird dieses ausserhalb des dafür vorgesehenen <ul> angelegt. Der Fehler liegt somit vermutlich in dieser Zeile "button.parentNode.appendChild(newLI);" Ich weiß allerdings keinen Weg wie ich in dieses <ul> springen könnte (auf einem relativen Weg). Kann mir hier jemand helfen? Sonst muss ich mir etwas mit ID's bauen was aber recht umständlich werden würde...
ich habe ein kleines Skript welches es dem Benutzer erlauben soll selbst Elemente erster Ebene und Elemente zweiter Ebene anzulegen.
- L1
--L1.1
--L1.2
L 2
--L2.2
usw.
Ich habe mir dafür folgendes aufgebaut (statischer Auszug zum testen):
Code:
<html>
<head>
<script type="text/javascript">
function AddNewL2(button, L1_Element)
{
var newLI = document.createElement("li");
newLI.className = "L2";
newLI.innerHTML = "<input onchange=\"CheckInputValue(this)\" style=\"background-color: #FF6633;\" value=\"(Sub-) Process/Application\" onFocus=\"ClearSampleValue(this, '(Sub-) Process/Application')\" type=\"text\" name=\"ProjectArea[][]\" class=\"input_table\" /><input type=\"hidden\" name=\"ProjectAreaID[][]\" value=\"\" /><button onclick=\"RemoveThis(this); return false;\">-</button><button onclick=\"MoveItem(this.parentNode, -1); return false;\"> ^ </button>";
button.parentNode.appendChild(newLI);
}
function AddNewL1()
{
var newLI = document.createElement("li");
newLI.className = "L1";
newLI.id = "PA_LI_"+L1_count;
newLI.innerHTML = "<input onchange=\"CheckInputValue(this)\" style=\"background-color: #FF6633;\" value=\"Process/Location\" onFocus=\"ClearSampleValue(this, 'Process/Location')\" id=\"PA_input_"+L1_count+"\" type=\"text\" name=\"ProjectArea[]\" class=\"input_table\"><input type=\"hidden\" name=\"ProjectAreaID[]\" value=\"\" /><button onclick=\"RemoveThis(this); return false;\">-</button><button onclick=\"AddNewL2(this, "+L1_count+"); return false;\">+</button><button onclick=\"MoveItem(this.parentNode, -1); return false;\"> ^ </button><ul><li class=\"L2\"><input onchange=\"CheckInputValue(this)\" style=\"background-color: #FF6633;\" value=\"(Sub-) Process/Application\" onFocus=\"ClearSampleValue(this, '(Sub-) Process/Application')\" type=\"text\" name=\"ProjectArea[][]\" class=\"input_table\" /><input type=\"hidden\" name=\"ProjectAreaID[][]\" value=\"\" /><button onclick=\"RemoveThis(this); return false;\">-</button><button onclick=\"MoveItem(this.parentNode, -1); return false;\"> ^ </button></li></ul>";
L1_count = L1_count +1;
document.getElementById('PA_list').appendChild(newLI);
}
</script>
</head>
<body>
<fieldset class="project_fieldset">
<legend>test</legend>
<button onclick="AddNewL1(this); return false;">New L1 Element</button>
<ul id="PA_list" class="PA_list">
<li id="PA_LI_1" class="L1">
<input id="PA_input_1" class="input_table" type="text" name="ProjectArea[]" onfocus="ClearSampleValue(this, 'Process/Location')" value="Process/Location" style="background-color: #FF6633;" onchange="CheckInputValue(this)">
<input type="hidden" value="" name="ProjectAreaID[]">
<button onclick="RemoveThis(this); return false;">-</button>
<button onclick="AddNewL2(this, 1); return false;">+</button>
<button onclick="MoveItem(this.parentNode, -1); return false;"> ^ </button>
<ul>
<li class="L2">
<input class="input_table" type="text" name="ProjectArea[][]" onfocus="ClearSampleValue(this, '(Sub-) Process/Application')" value="(Sub-) Process/Application" style="background-color: #FF6633;" onchange="CheckInputValue(this)">
<input type="hidden" value="" name="ProjectAreaID[][]">
<button onclick="RemoveThis(this); return false;">-</button>
<button onclick="MoveItem(this.parentNode, -1); return false;"> ^ </button>
</li>
</ul>
</li>
</ul>
<script language="JavaScript">var L1_count = 0+1;</script>
</body>
</html>Das Problem, dass ich nun habe besteht darin, dass wenn ich ein Element zweiter Ebene Hinzufüge, wird dieses ausserhalb des dafür vorgesehenen <ul> angelegt. Der Fehler liegt somit vermutlich in dieser Zeile "button.parentNode.appendChild(newLI);" Ich weiß allerdings keinen Weg wie ich in dieses <ul> springen könnte (auf einem relativen Weg). Kann mir hier jemand helfen? Sonst muss ich mir etwas mit ID's bauen was aber recht umständlich werden würde...
