<head>
<script language="JavaScript">
function DeleteRow(che){
var count=0;
if(che.length>0){
for(var i=0;i<che.length;i++){
if(che[i].checked==true){
myTable.deleteRow(i);
//如果表格的第一行为标题可以在删除的时候用myTable.deleteRow(i+1);
count+=1;
//当删除一行的时候che.length就减少1，所以需要i--
i--;
}
}
}
if(count==0 ){
alert("please select the item you want to delete!");
}
}
function Del(){
alert("The list is empty!");
}
function insertRow(tbIndex){
var objRow = myTable.insertRow(tbIndex);
var objCel = objRow.insertCell(0);
var element = document.createElement("input");
element.type="text";
objCel.insertBefore(element);
var objCel = objRow.insertCell(1);
var element = document.createElement("select");
var element1=document.createElement("OPTION");
element1.text="aaaa";
element.add(element1);
objCel.insertBefore(element);
var objCel = objRow.insertCell(2);
var element = document.createElement("input");
element.type="button"
element.value="aaaa"
objCel.insertBefore(element);
var objCel = objRow.insertCell(3);
objCel.innerHTML="<input type='radio' name='radio1'>"
//var element = document.createElement("input");
//element.type="radio";
//element.name="1";
//element.value="2";
objCel.insertBefore(element);
var objCel = objRow.insertCell(4);
var element = document.createElement("input");
element.type="checkbox";
element.id="checkbox";
objCel.insertBefore(element);
//设置增加行的background
objRow.style.background = "#FFFFCC";
}
</script>
</head>
<body>
<table width="774" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="myTable">
<input onclick="insertRow(myTable.rows.length);" type="button" name="Submit2" value="Add" />
<input onclick="javascript:document.all.checkbox==null?Del():DeleteRow(checkbox);" type="button" name="Submit3" value="Delete" />
</table>
点击删除摁钮，将删除在复选框中选中的行
<body>
分享到：
相关推荐
javascript动态增删表格行
在这个场景下，“动态增删行插件”是一个专门为网页添加动态行功能的组件，它可以轻松集成到现有的网页应用中，无需开发者进行大量的定制编码。 动态增删行功能的实现涉及到JavaScript、HTML和CSS等前端技术。...
js 动态按行增删表格，删除使用复选框选中删除
js动态增删改查。
JavaScript动态增删组件的好例子
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
然而，要实现动态增删改查，我们需要利用JavaScript。通过DOM（Document Object Model）操作，可以添加、删除或修改表格的行（`<tr>`）和单元格（`<td>`）。例如，可以添加一个“新增”按钮，当点击时，JS函数会在...
在给定的代码示例中，我们看到了一个利用JavaScript控制HTML表格增删行的实例，这在处理需要用户动态输入多条记录的场景时非常实用。 ### 标题解析：“javascript控制增删行” 这个标题简洁明了地指出了本文的核心...
动态增删表格行的纯JavaScript实现并不复杂，关键在于理解DOM操作和事件处理。通过创建和操作HTML元素，结合数据模型，我们可以轻松实现这一功能。在实际项目中，根据需求，可能还需要考虑数据的持久化、表单验证、...
使用JavaScript，我们可以动态地生成和更新表格行 (`<tr>`)、单元格 (`<td>`) 或表头 (`<th>`), 以及与之相关的样式和事件。例如，我们可以通过 `document.createElement()` 创建新元素，再通过 `innerHTML` 或 `...
在这个"layuiDemo增删改查动态增删组件带后台脚本完整演示.zip"压缩包中，我们可以看到一个使用layui实现的典型应用场景：数据的增删改查（CRUD）功能。 首先，"layuiDemo"是基于layui框架的一个示例项目，展示了...
"js实现对表格的增删查改"这个主题，就是关于如何利用JavaScript来管理HTML表格中的数据，提供用户友好的数据操作功能。 首先，我们来理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始，`<tr>`标签定义每...
html+js实现增删改查，超简单
通过这种方式，我们不仅实现了表格的动态增删行，还提供了友好的用户交互。同时，还可以根据实际需求进一步扩展，如增加编辑功能、数据排序、分页等。记住，JavaScript提供的强大DOM操作能力使我们在构建动态网页时...
"js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM（Document Object Model）节点的能力。DOM是网页内容的结构化表示，通过它可以方便地对页面元素进行增删改查。 首先，让我们深入了解如何使用...
本项目"JDBC+Servlet+Mysql 实现新闻表的动态增删改查"正是这样一个实例，它利用Java的Java Database Connectivity (JDBC) API、Servlet技术以及MySQL数据库来实现对新闻表的操作。下面我们将详细探讨这些技术及其在...
总结来说，动态增删表格行的JS代码分析涉及到HTML表格结构、JavaScript DOM操作以及事件监听。理解这些基本概念和方法，可以帮助开发者创建更加灵活和交互性强的网页应用。在实际项目中，可以在此基础上进行扩展，如...
javaScript实现动态增删插入表格
综上所述，这个项目展示了如何利用 Vue.js 和 Element UI 创建一个功能丰富的动态表格应用，包括单元格合并、表格编辑、动态增删行等功能。开发者可以参考这个项目学习 Vue 的数据绑定、组件化以及 Element UI 的...