suchen

Heim >Web-Frontend >js-Tutorial >js implementiert die Operationsmethode zum Hinzufügen und Löschen von Zeilen zur Tabelle

js implementiert die Operationsmethode zum Hinzufügen und Löschen von Zeilen zur Tabelle

高洛峰
高洛峰Original
2016-12-29 16:23:091052Durchsuche

Wie unten gezeigt: 

<!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>

Das Obige ist der gesamte Inhalt der vom Editor bereitgestellten js-Methode zum Hinzufügen und Löschen von Zeilen zur Tabelle. Ich hoffe, Sie unterstützen die chinesische PHP-Website ~

Weitere js-Implementierungsmethoden zum Hinzufügen und Löschen von Zeilen zu einer Tabelle finden Sie auf der chinesischen PHP-Website für verwandte Artikel!


Stellungnahme：
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
Vorheriger Artikel：Ein einfaches Beispiel für den Erhalt des Inhalts jedes tr und td des Tabellenknotens in jsNächster Artikel：Ein einfaches Beispiel für den Erhalt des Inhalts jedes tr und td des Tabellenknotens in js

In Verbindung stehende Artikel

Mehr sehen