<html>
<head>
<script language="javascript">
function add(obj)
{
var username = document.form.username.value;// 姓名
var flag = -1; //性别
for(var i=0;i<document.form.sex.length;i++)
{
if(document.form.sex[i].checked)
{
flag = i;
}
}
if(flag==0)
{
var sex = "男";
}
if(flag==1)
{
var sex = "女";
}
var birth = document.form.birth.value; //生日
var record = document.form.record.value; //学历
var table = obj.parentElement.parentElement.parentElement;
var row = table.rows.length;
var r = table.insertRow(row);
r.insertCell().innerText = username;
r.insertCell().innerText = sex;
r.insertCell().innerText = birth;
r.insertCell().innerText = record;
r.insertCell().innerHTML='<a href="#" onClick="del(this)">删除</a>';
}
function del(obj)
{
var table = obj.parentElement.parentElement.parentElement;
var row = table.rows.length;
for(var i=0;i<row;i++)
{
if(table.rows[i]==obj.parentElement.parentElement)
{
table.deleteRow(i);
}
}
}
</script>
</head>
<body>
<center>
<form name="form" value="">
<table border="1" width="500">
<tr>
<td colspan="4" align="center"><font face="宋体"><b>同学录</b></font></td>
</tr>
<td width>姓名：</td>
<td width><input type="text"name="username"/></td>
<td width>性别：</td>
<td width>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td width>生日：</td>
<td width><input type="text" name="birth"/></td>
<td width>学历：</td>
<td width><select name="record" size="1">
<option value="中专"/>中专
<option value="大专"/>大专
<option value="本科"/>本科
<option value="研究生"/>研究生
</td>
</tr>
<tr>
<td colspan="5" align="center"><input type="button" value="添加" onClick="add(this)"></td>
</tr>
<tr>
<td width="20%" align="center">姓名</td>
<td width="20%" align="center">性别</td>
<td width="20%" align="center">生日</td>
<td width="25%" align="center">学历</td>
<td width="15%" align="center">操作</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js动态操作表格</title>
<script language="javascript">
function init(){
_table=document.getElementById("table");
_table.border="1px";
_table.width="800px";
for(var i=1;i<6;i++){
var row=document.createElement("tr");
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement("td");
cell.id=i+"/"+j;
cell.appendChild(document.createTextNode("第"+cell.id+"列"));
row.appendChild(cell);
}
document.getElementById("newbody").appendChild(row);
}
}
function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*开始行*/
var endRow=document.getElementById("endRow").value;/*结束行*/
var beginCol=document.getElementById("beginCol").value;/*开始列*/
var endCol=document.getElementById("endCol").value;/*结束列*/
var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
else{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}
/*添加行，使用appendChild方法*/
function addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=length+1;
var td=document.createElement("td");
for(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("第"+td.id+"列"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild(tr);
}
function addRow_withInsert(){
var row=document.getElementById("table").insertRow(document.getElementById("table").rows.length);
var rowCount=document.getElementById("table").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
cell.id=(rowCount)+"/"+(i+1);
}
}
/*删除行，采用deleteRow(row Index)*/
function removeRow(){
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
/*添加列，采用insertCell(列位置)方法*/
function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
用来获得表格的列数
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";
}
}
/*删除列，采用deleteCell(列位置)的方法*/
function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
</script>
</head>
<body onLoad="init();">
<table id="table" align="center">
<tbody id="newbody"></tbody>
</table>
<div>
<table width="800px" border="1px" align="center">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td><td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="删除行"/></td></tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="删除列"/></td><td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td></tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="添加行"/></td></tr>
</table>
</div>
<div>
<table width="800px" border="1px" align="center">
<tr><td>从第<input type="text" id="beginRow" name="beginRow" value=""/>行到<input type="text" name="endRow" id="endRow" value=""/>行</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/></td></tr>
<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> ...
本篇文章将详细介绍两种jQuery实现动态添加删除行的方法。 ### 方法一：使用append()和remove() **添加行：** `append()`函数是jQuery中的一个方法，用于在元素末尾添加新的内容。在表格中添加新行，我们可以先...
js动态添加 删除行
<title>JS 动态添加删除行 姓名 年龄 <!-- 动态添加的数据行将放在这里 --> ()">添加行 ()">删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...
总结起来，通过结合HTML、CSS和jQuery，我们可以实现一个具有动态添加和删除行功能的表格。这个功能对于任何需要用户编辑和管理数据的网页应用都非常实用。在实际开发中，可以进一步优化和扩展这个功能，使其更加...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
然后，我们可以用JavaScript监听按钮的点击事件，执行添加或删除行的操作： ```javascript document.getElementById('addRow').addEventListener('click', function() { var table = document.getElementById('...
### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中，经常会遇到需要动态操作表格元素的情况，比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态...
在JavaScript编程中，实现...通过以上步骤，我们可以实现一个功能完备的表格动态添加删除行的JS特效，同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用，比如数据录入、配置管理等场景。
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中，`add()`函数...
- 使用`on()`方法来绑定事件，而不是直接使用`click()`，因为这样可以确保即使动态添加的元素也能响应事件。 - 考虑到性能，避免在循环中使用`append()`或`remove()`，因为它们会触发DOM的重新渲染。如果需要大量...
支持动态删除一行。 先演示结果，如中意了在好好研究代码。 1、原始界面如下： 2、添加一行，如要添加一行需点击“添加”按钮，现点击两下会自动添加两行，效果如下截图： 3、删除一行，如要删除指定行，先要选中...
在这个场景中，我们将深入探讨如何使用TableLayout动态添加和删除行，以及如何实现数据的统计。 1. **动态添加和删除行** 在TableLayout中，每一行是由TableRow对象构成的。要动态添加行，首先需要创建一个新的...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
本示例“jquery表格动态添加删除行特效代码”是利用jQuery来实现的一个功能，允许用户在表格中动态地添加和删除行，极大地提高了交互性和用户体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先，我们需要...
本例子展示了如何使用 JavaScript 实现动态添加删除 HTML 元素，包括获取元素对象、添加新行、删除行等操作。通过这篇文章，我们可以更好地理解 JavaScript 和 HTML 之间的交互，并掌握动态添加删除 HTML 元素的技术...