이미 가지고있는 행을 기반으로 빈 행을 추가하려고합니다. 나는 한 시간 동안 주위를 둘러보고 다른 방법을 시도했지만 아무도 작동하지 않는 것 같습니다. 이것이 내가 지금까지 가지고있는 것입니다.
HTML :
<div id="Oretablediv">
<table id="OreTable" border="1">
<tr>
<td>Ore</td>
<td>Amount</td>
<td>Price</td>
<td>Sub Total</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>
<select name="Ore">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
</td>
<td><input size=25 type="text" id="Amount" ></td>
<td>Price</td>
<td>SubTotal</td>
<td><input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()"/></td>
</tr>
</table>
자바 스크립트 :
function deleteRow(row){
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('OreTable').deleteRow(i);
}
function insRow(){
var row = document.createElement('tr');
var col = document.createElement('td');
var col2 = document.createElement('td');
row.appendChild(col);
row.appendChild(col2);
var table = document.getElementById("OreTable");
table.appendChild(row);
}
나는 현재 insRow()기능 에 대해서만 질문하고 있습니다. 행 삭제에 대한 제안이 있으면 공유하십시오.
기존 tr요소의 복사본을 만들 때 다음을 사용하여 cloneNode모든 DOM 요소를 만드는 대신createElement
이 시도:
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('OreTable').deleteRow(i);
}
function insRow() {
var tr = document.getElementById('toClone');
var cln = tr.cloneNode(true);
var elem = cln.querySelector('#Amount');
elem.value = '';
var table = document.getElementById("OreTable");
table.appendChild(cln);
}<div id="Oretablediv">
<table id="OreTable" border="1">
<tr>
<td>Ore</td>
<td>Amount</td>
<td>Price</td>
<td>Sub Total</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr id='toClone'>
<td>
<select name="Ore">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
</td>
<td>
<input size=25 type="text" id="Amount">
</td>
<td>Price</td>
<td>SubTotal</td>
<td>
<input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)" />
</td>
<td>
<input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()" />
</td>
</tr>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다