惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - YQM

NUnit单元测试属性介绍 C#静态构造函数 没有使用lock的Singleton How to serialize and deserialize using C# .NET - YQM Javascript调用web service 简单的英语不简单 我们应该怎样去学习和工作--写给自己 扩展方法 - YQM 使用反射-动态创建对象及调用对象方法 - YQM 使用XmlWriter对象 使用XmlReader类 - YQM 知道做什么而不是怎样做(摘抄) 生活15点,要记住! 设计模式之Command模式 Generate unique strings and numbers in C#(生成一个唯一的字符串和数值) Some notes Localization in ASP.NET 2.0 ASP.NET 2.0: Playing a bit with GridView "Sort Grouping" 通过TryParse来检验和转换数据类型
使用javascript动态添加和删除table的行和列
YQM · 2007-07-29 · via 博客园 - YQM

第一种方法:使用insertRow添加行,使用insertCell添加单元格,再用innerHTML填充单元格。使用deleteRow删除行,代码如下:
Javascript代码:

function addRow()
  
{
     
var root = document.getElementById("tbody")
     
var allRows = root.getElementsByTagName('tr');
     
var allCells = allRows[0].getElementsByTagName('td');
     
var newRow = root.insertRow();
     
var newCell0 = newRow.insertCell();
     
var newCell1 = newRow.insertCell();
     
var newCell2 = newRow.insertCell();
     
var newCell3 = newRow.insertCell();
     newCell0.innerHTML 
= allCells[0].innerHTML;
     newCell1.innerHTML 
= allCells[1].innerHTML;
     newCell2.innerHTML 
= allCells[2].innerHTML;
     newCell3.innerHTML 
= allCells[3].innerHTML;

  }

  
function removeRow(r)
  
{
    
var root = r.parentNode;
    root.deleteRow(r);
  }


HTML代码:

<table>
  
<tbody id="tbody">
    
<tr>
        
<td><select><option>hello</option><option>hi</option></select></td>
        
<td><input type="text" value="enter you name here" /></td>
        
<td><input type="text" value="text2"/></td>
        
<td><input type="button" value="remove" onclick="removeRow(this.parentNode.parentNode)"/></td>
    
</tr>
    
</tbody>
  
</table>
  
<table><tr><td><input type="button" value="add" onclick="addRow()" /></td></tr></table>

第二种方法:使用cloneNode方法(复制节点)和appendChild(附加子元素),使用removeChild删除子元素,代码如下:

Javascript代码:

function addRow()

    
var root = document.getElementById("tbody");
    
var allRows = root.getElementsByTagName('tr');
    
var cRow = allRows[0].cloneNode(true)
    root.appendChild(cRow);
}
 
function removeRow(r)
{
    
var root = r.parentNode;
    
var allRows = root.getElementsByTagName('tr')
    
if(allRows.length>1)
        root.removeChild(r);
    
else
        alert(
"only one row left, you not need to remove it.");
}

HTML代码:

<table border="0" cellspacing="0" cellpadding="0"> 
  
<tbody id="tbody">
    
<tr> 
      
<td><input type="text" name="text1" /></td> 
      
<td><input type="text" name="text2" /></td> 
      
<td><select name="select"> 
        
<option>item1</option> 
        
<option>item2</option> 
        
<option>item3</option> 
        
<option>item4</option> 
        
<option>item5</option>
      
</select></td>
      
<td><input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td>
    
</tr></tbody>
  
</table>
  
<input name="button" type="button" value="Add row" onclick="addRow(')">

以上代码IE7.0测试通过。其他浏览器未检测。