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

推荐订阅源

P
Palo Alto Networks Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
C
CERT Recently Published Vulnerability Notes
C
Cybersecurity and Infrastructure Security Agency CISA
S
Schneier on Security
S
Securelist
酷 壳 – CoolShell
酷 壳 – CoolShell
C
CXSECURITY Database RSS Feed - CXSecurity.com
Cyberwarzone
Cyberwarzone
Apple Machine Learning Research
Apple Machine Learning Research
S
SegmentFault 最新的问题
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
GbyAI
GbyAI
Security Latest
Security Latest
Last Week in AI
Last Week in AI
Microsoft Security Blog
Microsoft Security Blog
云风的 BLOG
云风的 BLOG
Recorded Future
Recorded Future
Webroot Blog
Webroot Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
TaoSecurity Blog
TaoSecurity Blog
C
Cisco Blogs
博客园 - 【当耐特】
Blog — PlanetScale
Blog — PlanetScale
Hugging Face - Blog
Hugging Face - Blog
B
Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Attack and Defense Labs
Attack and Defense Labs
The Last Watchdog
The Last Watchdog
U
Unit 42
阮一峰的网络日志
阮一峰的网络日志
Project Zero
Project Zero
WordPress大学
WordPress大学
L
LINUX DO - 最新话题
F
Fortinet All Blogs
L
LINUX DO - 热门话题
PCI Perspectives
PCI Perspectives
Simon Willison's Weblog
Simon Willison's Weblog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
MongoDB | Blog
MongoDB | Blog
Latest news
Latest news
P
Proofpoint News Feed
T
Threat Research - Cisco Blogs
The Hacker News
The Hacker News
爱范儿
爱范儿
O
OpenAI News
J
Java Code Geeks
T
The Exploit Database - CXSecurity.com
H
Hackread – Cybersecurity News, Data Breaches, AI and More

博客园 - YQM

NUnit单元测试属性介绍 C#静态构造函数 没有使用lock的Singleton How to serialize and deserialize using C# .NET - YQM Javascript调用web service 简单的英语不简单 我们应该怎样去学习和工作--写给自己 扩展方法 使用反射-动态创建对象及调用对象方法 使用XmlWriter对象 使用XmlReader类 知道做什么而不是怎样做(摘抄) 生活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测试通过。其他浏览器未检测。