Heim > Web-Frontend > js-Tutorial > 利用js动态添加删除table行的示例代码_javascript技巧

利用js动态添加删除table行的示例代码_javascript技巧

WBOY
Freigeben: 2016-05-16 17:09:04
Original
828 Leute haben es durchsucht

如下所示:

复制代码 代码如下:

//动态添加行
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 = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}


















产品名称

产品数量

产品单价


   
    

   
    


<script><BR>function addRow(){<BR>//添加行 <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>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>


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage