利用jQuery动态添加与删除表格行与单元格

63 浏览量更新于2024-08-30 收藏 65KB PDF 举报

在本文档中，我们将深入探讨如何使用jQuery库实现动态添加和删除表格行(tr)和单元格(td)的功能。jQuery是一种流行的JavaScript库，以其简洁的语法和强大的功能而闻名，特别适合前端开发。在服务器端运行（runat="server"）的HTML代码中，开发者引入了EasyUI框架，这是一个基于jQuery的UI库，提供了一系列用于构建复杂Web界面的组件和工具。首先，文档中包含了EasyUI的CSS链接，如主题图标、演示样式和默认主题样式，这有助于统一布局和美化UI。同时，引入了jQuery库和EasyUI的JavaScript文件，确保了核心功能的加载。为了支持多语言，还引用了不同语言版本的EasyUI-lang.js文件，这里以中文(zh_TW和zh_CN)为例。接下来，文档提到了一个"上传控件"的链接，这表明项目可能包含文件上传功能，这也是现代Web应用中常见的交互元素。动态添加和删除tr/td的主要部分没有直接给出，但我们可以推断出可能会使用EasyUI提供的table或datagrid组件，通过jQuery的append()、before()、remove()等方法来操作DOM。例如，以下是一个简化的示例： ```javascript // 获取表格元素 var table = $('#yourTableId'); // 添加新行 function addRow(data) { var newRow = $('<tr>'); newRow.append('<td>' + data.column1 + '</td>').append('<td>' + data.column2 + '</td>'); table.append(newRow); } // 删除指定行 function deleteRow(index) { table.children('tr:eq(' + index + ')').remove(); } // 示例调用 addRow({ column1: '数据1', column2: '数据2' }); deleteRow(2); // 删除索引为2的行 ``` 这个例子中，`addRow`函数动态创建一个新的行并添加到表格尾部，而`deleteRow`函数则根据提供的索引移除对应行。实际操作时，可能还需要处理用户交互事件（如按钮点击），以及数据绑定和验证等问题。该文档提供了一个基础框架，展示了如何结合jQuery和EasyUI在服务器端环境下创建动态可扩展的表格。对于需要管理数据展示和增删操作的开发者来说，这部分代码是实现这类功能的核心部分，可根据具体需求进行扩展和定制。

jquery动态添加删除动态添加删除(tr/td)

代码很简单，实现的功能也很简单，有需要的小伙伴参考下吧。

代码如下:

<!–easyui –>

<!–上传控件 –>

<!–编辑器 –>

/* jquery easyui 操作*/

window.onload = function () {

InitGird();

}

//加载编辑器

var editor;

$(function () {

editor = KindEditor.create(‘textarea[name=”Describe”]’, {

resizeType: 1,

uploadJson: ‘../ashx/upload_ajax.ashx?action=EditorFile&IsWater=1’,

fileManagerJson: ‘../ashx/upload_ajax.ashx?action=ManagerFile’,

allowFileManager: true

});

//初始化上传控件

$(function () {

InitSWFUpload(“../ashx/upload_ajax.ashx”, “Filedata”, “1024 KB”, “../../script/swfupload/swfupload.swf”, 1, 1);

});

//搜索

function Search() {

$(‘#dgCaseInfo’).datagrid(‘load’, {

action: “loadListPage”,

Names: $(“#Names”).val()

});

}

//初始化表格

function InitGird() {

$(“#dgCaseInfo”).datagrid({

autoRowHeight: false,

loadMsg: ‘正在努力加载中…’,

url: ‘../ashx/GetSm_CaseInformation.ashx?types=loadListPage’, //请求数据的页面

sortName: ‘ID’, //排序字段

idField: ‘ID’, //标识字段,主键

iconCls: ”, //标题左边的图片

singleSelect: true,

width: ‘100%’, //宽度

height: ‘auto’, //高度

nowrap: true, //是否换行，True 就会把数据显示在一行里

striped: true, //True 奇偶行使用不同背景色

collapsible: false, //可折叠

下载后可阅读完整内容，剩余5页未读，立即下载

改进这段代码让它有鼠标移入图片改变的效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body>

女靴女包

雪地靴男包

冬裙登山鞋

呢大衣皮带

毛衣围巾

棉服皮衣

女裤男毛衣

羽绒服男棉服

牛仔裤男靴

<script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../ima/女靴.jpg") }) }) </script> </body> </html>

2023-06-09 上传

你可以在 `$("tr td")mouseenter()` 方法中，使用 `$(this)` 获取当前鼠标移入的单元格，然后再使用 `$(this).next()` 获取该单元格后面的图片元素，最后改变图片的 `src` 属性即可实现鼠标移入图片改变的效果，示例...

<!doctype html> <html> <head> <meta charset="UTF-8"> <style> #bills{ width: 400px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { 空缺处 }); </script> </head> <body> </tr

编号分类名称价格(元)

01 食品农夫山泉矿泉水 2.00
02 日用品洗发水 25.00

03 娱乐休闲暑假旅游 5000.00

</body>将食品替换成图片显示

编号	分类	名称	价格(元)
01	食品	农夫山泉矿泉水	2.00
02	日用品	洗发水	25.00
03	娱乐休闲	暑假旅游	5000.00

2023-06-10 上传

<td>农夫山泉矿泉水</td> <td>2.00</td> </tr> <tr> <td>02</td> <td>日用品</td> <td>洗发水</td> <td>25.00</td> </tr> <tr> <td>03</td> <td>娱乐休闲</td> <td>暑假旅游</td> <td>5000.00</td> ...

<c:forEach items="${files}" var="file"> ${file.name} ${file.size} 下载 <button type="button" onclick="deleteFile('${file.path}')">删除</button> </c:forEach>修改为jquery格式

2023-05-05 上传

$(function() { ...path=" + file.path + "'>下载</a>('" + file.path + "')'>删除</button></td></tr>"; $("#fileTable").append(row); }); }); 其中 #fileTable 是你的文件列表所在的 table 的 id。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body>
<button>批量删除</button>

<label><input type="checkbox" /></label> 学号姓名专业操作

<label><input type="checkbox" /></label> 9527 唐伯虎国画 <button class="view">查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 007 武松体育 <button class="view">查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 1024 诸葛亮心理学 <button class="view">查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 1010 刘义计算机 <button class="view">查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 6969 晨儿桑蚕技术 <button>查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 666 章三小龙虾烹饪 <button>查看</button><button>修改</button><button>删除</button>

<label><input type="checkbox" /></label> 5520 里斯天文 <button>查看</button><button>修改</button><button>删除</button>

尾页 下一页 上一页 首页

<script> 如何实现删除功能？

<label><input type="checkbox" /></label>	学号	姓名	专业	操作
<label><input type="checkbox" /></label>	9527	唐伯虎	国画	<button class="view">查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	007	武松	体育	<button class="view">查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	1024	诸葛亮	心理学	<button class="view">查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	1010	刘义	计算机	<button class="view">查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	6969	晨儿	桑蚕技术	<button>查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	666	章三	小龙虾烹饪	<button>查看</button><button>修改</button><button>删除</button>
<label><input type="checkbox" /></label>	5520	里斯	天文	<button>查看</button><button>修改</button><button>删除</button>
尾页下一页上一页首页

2023-06-13 上传

可以通过以下步骤实现删除功能： 1. 给每个“删除”按钮添加一个点击事件监听器。 2. 在事件监听器中获取被点击的行。 3. 从表格中移除该行。代码示例： ``` $('button:contains("删除")').click(function() { ...

weixin_38700409

粉丝: 5
资源: 953

女靴		女包
雪地靴		男包
冬裙		登山鞋
呢大衣		皮带
毛衣		围巾
棉服		皮衣
女裤		男毛衣
羽绒服		男棉服
牛仔裤		男靴

利用jQuery动态添加与删除表格行与单元格

jQuery+ajax实现动态添加表格tr td功能示例

JQuery动态添加删除table行.

74、jquery表格动态添加删除行代码

1 2 $k 0 2 $k 有很多行数据，用jquery，如果isb的列的值为1，则给他所在行的tr加上类名为blue的class。

前端原生jqrey 如何给里边填充数据

前端jqrey 动态渲染表单

<c:forEach items="${files}" var="file"> ${file.name} ${file.size} 下载 <button type="button" onclick="deleteFile('${file.path}')">删除</button> </c:forEach>修改为jquery格式

最新资源