Att placera ut texten precis där man vill ha den, blir nog svårt. Du skulle ju kunna bygga ett "formulär" i form av en tabell, där varje <tr> representerar en <option>. Då skulle man utan problem kunna göra det du vill. Om meningen är att formuläret senare skall skickas iväg, kan man använda sig av <input type="hidden">-fält där man sparar ned informationen som finns i den <tr> man klickade på (koden är endast testad i IE6 och det går bara att markera raderna):
<script>
function mark(obj){
var tr = null;
while (obj.nodeName.toLowerCase() != "tr"){
obj = obj.parentNode;
}
for (var i = 0; i < obj.childNodes.length - 1; ++i){
var cn = obj.childNodes[i];
if (cn.nodeName.toLowerCase() == "td"){
cn.style.backgroundColor = cn.style.backgroundColor != "highlight" ? "highlight" : "menu";
}
}
}
</script>
<style>
.dataCell{
background-color: menu;
}
</style>
<table border="0" cellspacing="0" width="550">
<tr>
<td width="100">Pcs</td>
<td width="250">Description</td>
<td width="100">Wgt(Kg)</td>
<td width="100"></td>
</tr>
<tr>
<td><input name="pcs"></td>
<td><input name="description"></td>
<td><input name="wgt"></td>
<td><input type="button" value="Add" onclick=""></td>
</tr>
<tr>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td><input type="button" value="Clear" onclick=""></td>
</tr>
<tr>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td><input type="button" value="Update" onclick=""></td>
</tr>
<tr>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td class="dataCell" onclick="mark(this)"></td>
<td><input type="button" value="Delete" onclick=""></td>
</tr>
</table>
