recherche

Maison  >  Article  >  interface Web  >  js implémente la méthode opérationnelle d'ajout et de suppression de lignes dans la table

js implémente la méthode opérationnelle d'ajout et de suppression de lignes dans la table

高洛峰
高洛峰original
2016-12-29 16:23:091016parcourir

Comme indiqué ci-dessous : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<script type="text/javascript">
//添加方法
function addtr()
{
  //var trid=0;
  var tab=document.getElementByIdx_x("signFrame");
  //添加行
  var newTR = tab.insertRow(tab.rows.length);
 alert(tab.rows.length);
  //trid++;
   
  //获取序号=行索引
  var xuhao=newTR.rowIndex.toString();
 alert(xuhao);
  newTR.id = "tr" + xuhao;
  //添加列:序号
  var newNameTD=newTR.insertCell(0);
  //添加列内容
  newNameTD.innerHTML = xuhao;
  //添加列:日期
  var newNameTD=newTR.insertCell(1);
  //添加列内容
  newNameTD.innerHTML = "<input name=&#39;time" + xuhao + "&#39; id=&#39;time" + xuhao + " size=&#39;19&#39; onmouseover=&#39;this.style.backgroundColor=#6298E1;this.style.color=#000000;&#39; onmouseout=&#39;this.style.backgroundColor=#6298E1;this.style.color=#000000;&#39; />";
 
  //添加列:方式
  var newEmailTD=newTR.insertCell(2);
  //添加列内容
  newEmailTD.innerHTML = "<select style=&#39;width:70px;&#39; name=&#39;way" + xuhao + "&#39; id=&#39;way" + xuhao + "&#39;><option value=&#39;电话&#39;>电话</option><option value=&#39;QQ&#39;>QQ</option>  </select>";
 
  //添加列:备注
  var newTelTD=newTR.insertCell(3);
  //添加列内容
  newTelTD.innerHTML = "<input size=&#39;60&#39; name=&#39;remark" + xuhao + "&#39; id=&#39;remark" + xuhao + "&#39; type=&#39;text&#39; onclick=&#39;showid(this)&#39; />";
     
  //添加列:删除按钮
  var newDeleteTD=newTR.insertCell(4);
  //添加列内容
  newDeleteTD.innerHTML = "<div align=&#39;center&#39; style=&#39;width:40px&#39;><a href=&#39;javascript:;&#39; onclick=\"deltr(&#39;tr" + xuhao + "&#39;)\">删除</a></div>";
     
}
</script>
 
<script type="text/javascript">
//删除其中一行
function deltr(trid)
{  //alert(trid);
  var tab=document.getElementByIdx_x("signFrame");
  var row=document.getElementByIdx_x(trid);  
  var index=row.rowIndex;//rowIndex属性为tr的索引值，从0开始 
  tab.deleteRow(index); //从table中删除
 
  //重新排列序号，如果没有序号，这一步省略
  var nextid;
  for(i=index;i<tab.rows.length;i++){
    tab.rows[i].cells[0].innerHTML = i.toString();
    nextid=i+1;
    remark=document.getElementByIdx_x("remark"+nextid);
    remark.id="remark";
  }
}
 
</script>
 
 
<script type="text/javascript">
  function showid(txt)
  {alert(txt.id);
    }
 
</script>
<body>
<input type="button" value="保存" onclick="addtr()" />
 
 
<table border="1px" width="70%" id="signFrame">
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
    <td width="50px">序号</td>
    <td width="170px">时间</td>
    <td width="100px">方式</td>
    <td>备注</td>
    <td width="80px">操作</td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr id="trHeader">
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
</table>
 
  
 
</body>
</html>

Ce qui précède est l'intégralité du contenu de la méthode js apportée par l'éditeur pour ajouter et supprimer des lignes au tableau. J'espère que vous prendrez en charge le site Web PHP chinois~

Pour plus de méthodes d'implémentation js pour ajouter et supprimer des lignes à une table, veuillez faire attention au site Web PHP chinois pour les articles connexes !


Déclaration：
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
Article précédent：Un exemple simple d'obtention du contenu de chaque tr et td du nœud de table en jsArticle suivant：Un exemple simple d'obtention du contenu de chaque tr et td du nœud de table en js

Articles Liés

Voir plus