使用js自动生成表格的行及元素并可以删除选中行

最新推荐文章于 2021-06-30 07:16:42 发布
最新推荐文章于 2021-06-30 07:16:42 发布
阅读量1.4k 收藏 1
点赞数 2
文章标签： input button function javascript border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunjunlu/article/details/6972123
版权

 <HTML> 

<HEAD> 
<TITLE>   New   Document   </TITLE> 
<SCRIPT   LANGUAGE= "JavaScript"> 
    function createInput()   {  
var   row   =   activeTable.insertRow(activeTable.rows.length-1); 
var   col   =   row.insertCell(0); 
var   i   =   row.rowIndex; 
col.innerHTML   =   ' <input   name= "checkbox" type="checkbox"  size= "2 "> ';   
col   =   row.insertCell(1);   
col.innerHTML   =   ' <input   name= "keituki1 "   size= "2 ">';   
col   =   row.insertCell(2);   
col.innerHTML   =   ' <input   name= "kenmei "   size= "18 "   value= " "> ';   
col   =   row.insertCell(3);   
}

function   delrow()   {

var ok=document.getElementsByName("checkbox");
       for(var k=0;k<ok.length;k++)
    {
            if(ok[k].checked==true)
            {  
                activeTable.deleteRow(k+1); 
              k--
            }
       }


}  
function selectAll() {
   
    var checkboxes = document.getElementsByName("checkbox");
    for(var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
    }
} 
</script> 
</HEAD> 
<BODY>

<table   id= "activeTable"   style= "border:   #000000 solid 1px; " cellspacing= "0 " width= "100% " cellpadding= "0 "> 
        <caption> 請&nbsp;求&nbsp;内&nbsp;訳 </caption> 
        <tr> 
            <td   nowrap> 請求月 </td> 
            <td   nowrap> 計上月 </td> 
            <td   nowrap> 請求件名 </td> 
           
        </tr> 
     <tr> 
       <td> <input type="button" value="JS创建文本框" onClick="createInput();" />  </td> 
            <td   > <input type="button" value="全选" onClick="selectAll();" />  </td> 
        
        <td> <button   onClick= "delrow() "> 删除本行 </button></td>
        </tr> 
<table> 
</BODY> 
</HTML> 

莫卢俊德
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 实现 删除表格指定行
03-31
js 实现 删除表格指定行! 值得下载看看!资源免费,大家分享!!
js实现添加删除一行。每一行下面可以再添加一行。序号自动改变
08-30
这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释： 1. **动态创建DOM元素**： - ...
php勾选框删除,javascript如何实现删除表格中勾选的行（代码）
weixin_42160398的博客
03-19 188
本篇文章给大家带来的内容是关于javascript如何实现删除表格中勾选的行(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。第一步：获取当前表格所选中的数据//devicelist为表格的id属性var checkStatus = table.checkStatus('devicelist'),devicecheck_data = checkStatus.data;var ...
JS表格删除行,增加行,选中高亮
chizen1319的博客
12-05 109
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/h...
html做拖拽删除,js实现拖拽元素选择和删除
weixin_40009472的博客
06-30 286
本文实例为大家分享了js实现拖拽元素选择和删除的具体代码，供大家参考，具体内容如下我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。结果如下：代码如下：js置顶动画*{margin:0;padding:0;user-select:none;}.move-box {height:100px;width:100px;line-h...
js动态删除表格中的某一行
Cupid
05-13 1888
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
JQGrid的用法解析(列编辑,添加行,删除行)
09-04
JQGrid是一款强大的JavaScript表格插件，用于在Web应用中展示和管理数据。它提供了丰富的功能，包括列编辑、添加行和删除行等操作。在本文中，我们将深入解析JQGrid如何实现这些功能。 首先，JQGrid的初始化是通过...
vue+jq实现商城商品属性的添加以及生成表格并还原到前端展示sku列表
05-17
在本文中，我们将深入探讨如何使用Vue.js和jQuery来实现一个商城商品属性的添加功能，以及如何生成表格并在前端展示SKU列表。这个功能对于电商网站来说至关重要，因为它允许用户选择不同商品属性组合，并实时查看...
常用的js动态增加（删除）table数据行的功能
03-01
`autotable.js`可能是一个用于自动生成表格的工具，它可能提供了更高级的功能，如数据绑定、分页、排序等。通常，这类工具会提供API供开发者调用，以生成复杂的表格并处理用户交互。 6. **CSS样式（default.css）*...
动态增加删除行.html
05-26
- JavaScript或jQuery提供了DOM操作API，如`createElement()`、`appendChild()`和`innerHTML`等，可以用来创建新的`<tr>`元素，并将其插入到表格的适当位置。 - 如果使用jQuery，可以更简洁地使用`$('<tr>...</tr>...
JS实现表格选中多行变色,修改和删除多行
04-03
本文件利用 AJAX 和JavaScript实现了动态生成表格,以及对表格的修改,删除多行并返回数据库更新.可以选中单行,不连续的多行,和连续的多行(shift 拖选),在前台按列排序. 仿excel,在前台按列进行排序,倒序等 欢迎大家提出宝贵意见
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp <table id=viewTabs> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input name=productName type=text></td> <td><input name=productNumber type
js删除数组元素、清空数组的简单方法(必看)
12-11
一、清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 []，空数组，即被清空了 二、删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置。 三，js 删除数组几种方法 var arr=[‘a’,’b’,’c’]; 若要删除其中的’b’,有两种方法： 1，delete方法:delete arr[1] 这
js实现拖拽元素选择和删除
10-14
主要为大家详细介绍了js实现拖拽元素选择和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用js动态添加删除 table的行
fox123871的专栏
08-11 863
//动态添加行 function addRow(){    var table = document.getElementById("tableID");    var newRow = table.insertRow(); //创建新行    var newCell1
js动态添加和删除一行
热门推荐
bbqk9的专栏
08-21 1万+
添加表格信息
js jq 判断浏览器名称_D3.js入门教程 | 技术专题第三期征文
weixin_39857174的博客
11-29 50
WHATD3.js是一个JavaScript库操纵文档基于数据。D3帮助你把数据使用HTML、SVG和CSS。D3强调web标准给你完整的现代浏览器的功能没有把自己专有的框架,结合强大的可视化组件和数据驱动的DOM操作方法。D3是一个专门处理2d场景的数据可视化的库WHY社区已经存在大量处理数据可视化的js库,为何还要学习D3呢?类似echarts,highcharts这些高度封装好的库...
js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
xyjikl
12-13 7439
***************************************************************** js动态添加表的列,并在列中添加控件的方法 添加行 function addrows() { var table=document.getElementById("t1"); var row; row=table.insertRow(); var ce
js删除元素_JS与DOM操作
weixin_39636718的博客
12-03 247
DOM 的来源（Document Object Model 文档对象模型）网页就像一棵树，一个节点对应多个分支。JS 通过DOM来操作网页，HTML将所有的节点打包成一个window.document对象，所有的元素都可以通过Document来操作。JS基本DOM 调用获取单一元素页面存在多个元素，只会返回第一个元素的值window.idselector或者idselector。如：window....
javascript使用remove删除表格最后一行
最新发布
05-31
是的，您可以使用 `remove()` 方法来删除表格中的最后一行，以下是一个示例代码： ```javascript var table = document.getElementById("myTable"); // 获取表格 table.deleteRow(table.rows.length - 1); // 删除...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值