B
bruce_lee_978
I have a script which adds a row. I am using the dom model to do this.
I have an image link which is to be inserted next to a input field.
How do i do this?
I think you have to change the "TD" elemement , and i have heard of
something called innerHtml but i dont know how to use it. please help.
script:
<head>
<script type="text/javascript">
function addRow(id){
var index = document.form1.hidden.value;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
row.setAttribute("id","row" + index);
//Clone this node
var targetNode = document.getElementById('SELECT')
input1 = targetNode.cloneNode(true)
input1.setAttribute("name","select" +index)
input2 = document.createElement("input");
input2.setAttribute("name","a" +index)
input2.setAttribute("value","")
input2.setAttribute("type","text")
input2.setAttribute("readOnly","false")
input2.setAttribute("size","32")
input3 = document.createElement("input");
input3.setAttribute("name","b" +index)
input3.setAttribute("value","")
input3.setAttribute("type","text")
input3.setAttribute("readOnly","false")
input3.setAttribute("size","8")
input4 = document.createElement("input");
input4.setAttribute("name","c" +index)
input4.setAttribute("value","")
input4.setAttribute("type","text")
input4.setAttribute("readOnly","false")
input4.setAttribute("size","5")
input5 = document.createElement("input");
input5.setAttribute("name","d" +index)
input5.setAttribute("value","")
input5.setAttribute("type","text")
input5.setAttribute("size","8")
input6 = document.createElement("input");
input6.setAttribute("name","e" +index)
input6.setAttribute("value","")
input6.setAttribute("type","text")
input6.setAttribute("size","5")
var td1 = document.createElement("TD")
td1.appendChild(input1)
var td2 = document.createElement("TD")
td2.appendChild (input2)
var td3 = document.createElement("TD")
td3.appendChild (input3)
var td4 = document.createElement("TD")
td4.appendChild (input4)
var td5 = document.createElement("TD")
td5.appendChild (input5)
var td6 = document.createElement("TD")
td6.appendChild (input6)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
tbody.appendChild(row);
//increase index of hidden field
index++
document.form1.hidden.value=index
}
</script>
</head>
<BODY>
<form name="form1">
<input type="hidden" value="0" name="hidden">
<table id="myTable" cellspacing="0" border="1">
<tr>
<td> <select size="1" name="havnkode" id="select">
<option value="02">Drop down</option>
<option value="00">Test1</option>
<option value="28">Test2</option>
<option value="06">Test3</option>
</td>
<td>row1_column1</td><td>row1_column1</td><td>
</tr>
</table>
<input type="button" value="new row"
onClick="javascript:addRow('myTable')">
</form>
I have an image link which is to be inserted next to a input field.
How do i do this?
I think you have to change the "TD" elemement , and i have heard of
something called innerHtml but i dont know how to use it. please help.
script:
<head>
<script type="text/javascript">
function addRow(id){
var index = document.form1.hidden.value;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
row.setAttribute("id","row" + index);
//Clone this node
var targetNode = document.getElementById('SELECT')
input1 = targetNode.cloneNode(true)
input1.setAttribute("name","select" +index)
input2 = document.createElement("input");
input2.setAttribute("name","a" +index)
input2.setAttribute("value","")
input2.setAttribute("type","text")
input2.setAttribute("readOnly","false")
input2.setAttribute("size","32")
input3 = document.createElement("input");
input3.setAttribute("name","b" +index)
input3.setAttribute("value","")
input3.setAttribute("type","text")
input3.setAttribute("readOnly","false")
input3.setAttribute("size","8")
input4 = document.createElement("input");
input4.setAttribute("name","c" +index)
input4.setAttribute("value","")
input4.setAttribute("type","text")
input4.setAttribute("readOnly","false")
input4.setAttribute("size","5")
input5 = document.createElement("input");
input5.setAttribute("name","d" +index)
input5.setAttribute("value","")
input5.setAttribute("type","text")
input5.setAttribute("size","8")
input6 = document.createElement("input");
input6.setAttribute("name","e" +index)
input6.setAttribute("value","")
input6.setAttribute("type","text")
input6.setAttribute("size","5")
var td1 = document.createElement("TD")
td1.appendChild(input1)
var td2 = document.createElement("TD")
td2.appendChild (input2)
var td3 = document.createElement("TD")
td3.appendChild (input3)
var td4 = document.createElement("TD")
td4.appendChild (input4)
var td5 = document.createElement("TD")
td5.appendChild (input5)
var td6 = document.createElement("TD")
td6.appendChild (input6)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
tbody.appendChild(row);
//increase index of hidden field
index++
document.form1.hidden.value=index
}
</script>
</head>
<BODY>
<form name="form1">
<input type="hidden" value="0" name="hidden">
<table id="myTable" cellspacing="0" border="1">
<tr>
<td> <select size="1" name="havnkode" id="select">
<option value="02">Drop down</option>
<option value="00">Test1</option>
<option value="28">Test2</option>
<option value="06">Test3</option>
</td>
<td>row1_column1</td><td>row1_column1</td><td>
</tr>
</table>
<input type="button" value="new row"
onClick="javascript:addRow('myTable')">
</form>