JQUERY给指定的table追加tr& td

本文介绍如何使用jQuery在页面加载时动态向表格单元格内添加按钮,并通过JavaScript实现点击按钮下载附件的功能。文章还提供了JSON数据解析及表单提交的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在页面加载时,根据table中td的名称在后面新加一个td

//页面加载时,调用addButton()

jQuery(document).ready(function(){
        addButton();
    });


//此处用after会导致table变形

function addButton(){
       jQuery("td[name='OIPMS_PM_DOCTEM.FILENAME']").append('<td><input  type="button" onclick="download()" value=\"下载"/></td>');
    }
 

 //让追加的td不换行,套个div加上样式style="display:inline

       jQuery("td[name='OIPMS_PM_DOCTEM.FILENAME']").append('  <div style="display:inline;"><td><input  type="button" onclick="download()" value=\"下载"/></td></div>');

-------------以下留给自己备注看;

因为我在后台用的JSONArray数组,并且只有一条附件信息,所有直接取attObj[0]

function download(){
        //附件JSON对象
	    var attach='<%=attachments%>' ;
	    var attObj=eval("("+attach+")");//转换为json对象 
	    alert(attObj[0].id);
	    //data =(new Function("","return "+attach))();
	    //alert(data[0].id);
	    form.action="<%=request.getContextPath()%>/DownloadAction.do?cmd=download&<%=IDownloadConstants.PARAMETER_NAME_ATTID %>="+attObj[0].id;
            form.submit();
    }

//Action中setAttribute

request.setAttribute("atts", JSONArray.fromObject(atts).toString()) ;

//页面获取附件JSON

    String attachments=(String)request.getAttribute("atts") ;

//JSON解析的几个注意点http://www.cnblogs.com/myjavawork/archive/2011/03/10/1979279.html

 

 

为了实现点击“获取数据”按钮后将 `data` 数据源的内容添加到表格中,我们可以借助 jQuery 来完成这个功能。 以下是完整的解决方案: ### HTML + JavaScript (jQuery) 实现代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态加载数据</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- 按钮 --> <input type="button" id="getDataBtn" value="获取数据"> <!-- 表格结构 --> <table border="1"> <thead> <tr&gt; <th>书名</th> <th>页数</th> <th>售价</th> </tr&gt; </thead> <tbody> <tr&gt; <td>JQuery</td> <td>250</td> <td>52</td> </tr&gt; </tbody> </table> <script> // 定义数据源 var data = [ { name: 'JavaScript', pages: '320', price: '64' }, { name: 'HTML和CSS', pages: '120', price: '48' } ]; // 绑定事件监听器 $(document).ready(function () { $('#getDataBtn').click(function () { $.each(data, function (index, book) { // 动态生成新行并插入到 tbody 中 $('table tbody').append( `<tr&gt;<td>${book.name}</td><td>${book.pages}</td><td>${book.price}</td></tr&gt;` ); }); }); }); </script> </body> </html> ``` --- ### 解释步骤 1. **引入 jQuery** 使用了外部的 jQuery 库 (`<script src="...">`) 提供 DOM 操作支持。确保网络可以访问此链接地址。 2. **绑定按钮点击事件** 利用 `$(document).ready()` 确保页面完全加载后再初始化脚本,并通过 `$().click(...)` 监听 “获取数据” 按钮点击操作。 3. **遍历数据源** 使用 `$.each(data,...)` 遍历数组变量 `data` 内的所有书籍信息。 4. **动态创建表格内容** 对于每一条记录,构造新的 `<tr&gt;` 和对应的单元格 `<td>` 标签字符串,并将其追加至 `<tbody>` 的结尾部分(`$('table tbody').append(...))`. --- 如果你运行以上完整代码,在浏览器中打开时会发现: - 页面初始状态包含一行预设的数据项; - 单击 "获取数据" 后,从 `data[]` 数组取出两本书的信息附加进表内显示出来。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

撸依天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值