Maison > interface Web > js tutoriel > 利用js动态添加删除table行的示例代码_javascript技巧

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

WBOY
Libérer: 2016-05-16 17:09:04
original
828 Les gens l'ont consulté

如下所示:

复制代码 代码如下:

//动态添加行
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>


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal