js_javascript スキルを使用してテーブルの行を動的に追加および削除するサンプル コード

以下に示すように:

コードをコピーしますコードは次のとおりです:

//行を動的に追加します
function addRow(){
var table = document.getElementById("tableID");
var newRow = table.insertRow() ; //新しい行を作成します
var newCell1 = newRow.insertCell(); //新しいセルを作成します
newCell.innerHTML = "" //セルの内容
newCell.setAttribute("align"; ,"center ") //位置を設定
}

//行を動的に削除します
function deleteRow(){
var rowIndex = events.srcElement.parentElement.parentElement.rowIndex;
var style = document.getElementById("tableID");
styles.deleteRow(rowIndex);
}

<テーブル ID= testTbl" border=1>


商品名


商品数量
< /td>

商品単価




< ; select name="a">
電化製品
電化製品
< ;/select>









<script><br>function addRow(){<br>//行を追加</p> <p>var newTr = testTbl.insertRow();<br>//列を追加<br>var newTd0 = newTr.insertCell();<br>var newTd1 = newTr.insertCell();<br>var newTd2 = newTr .insertCell();<br>var newTd3 = newTr.insertCell();<br>//列の内容と属性を設定します</p> <p>newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;<br>newTd1.innerText = document.all("b").value; <br>newTd2.innerText = document.all("c").value;<br>newTd3.innerHTML= '<input type="button" name="del" value="削除" onclick="del(this )">';<br>}<br>function del(o)<br>{<br>var t=document.getElementById('testTbl');<br>t.deleteRow(o.parentNode.parentNode. rowIndex)<br>}<br></script>