jquery 追加tr和删除tr示例代码

代码如下:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#getAtr").click(function(){
$str='';
$str+="<tr align='center'>";
$str+="<td><input type='text' name='advTitle[]'/></td>";
$str+="<td><input type='file' name='img[]' /></td>";
$str+="<td><input type='text' name='advContent[]' /></td>";
$str+="<td><input type='text' name='advSource[]' /></td>";
$str+="<td><input type='text' name='advAuthor[]' /></td>";
$str+="<td><input type='text' name='advPosition[]' /></td>";
$str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
$str+="</tr>";
$("#addTr").append($str);
});
});

function getDel(k){
$(k).parent().remove();
}
</script>

--------------------------------------------------------------------------------
html部分
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td>广告名称</td>
<td>广告图片</td>
<td>广告内容</td>
<td>广告来源</td>
<td>广告作者</td>
<td>广告描述</td>
<td align="center"><a href="#" id="getAtr">追加内容</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="advTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="advContent[]" /></td>
<td><input type="text" name="advSource[]" /></td>
<td><input type="text" name="advAuthor[]" /></td>
<td><input type="text" name="advPosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5"><input type="submit" value="全部添加" /></td>
</tr>
</table>

赞 (0)

相关推荐

  • js实现table添加行tr、删除行tr、清空行tr的简单实例

    如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

  • js动态控制table的tr、td增加及删除的具体实现

    html: 复制代码 代码如下: <table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>序号</th&

  • js动态给table添加/删除tr的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author"

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • JS实现从表格中动态删除指定行的方法

    本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

  • jQuery动态添加与删除tr行实例代码

    jQuery动态添加与删除tr行实例代码

    这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

  • layui中使用jquery控制radio选中事件的示例代码

    勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

  • git中submodule子模块的添加、使用和删除的示例代码

    背景 项目中经常使用别人维护的模块,在git中使用子模块的功能能够大大提高开发效率. 使用子模块后,不必负责子模块的维护,只需要在必要的时候同步更新子模块即可. 本文主要讲解子模块相关的基础命令,详细使用请参考man page. 子模块的添加 添加子模块非常简单,命令如下: git submodule add <url> <path> 其中,url为子模块的路径,path为该子模块存储的目录路径. 执行成功后,git status会看到项目中修改了.gitmodules,并增加了一

  • MyBatis-Plus实现逻辑删除的示例代码

    目录 一.引言 二.具体实现 步骤一:首先我们需要配置未删除.已删除分别标识的状态码是什么,这里采用的yml格式. 步骤二:在实体类对应的字段上加上注解@TableLogic即可. 步骤三:测试测试,现在我们测试通过ID来删除某一个用户的时,看看执行的SQL语句是UPDATE了. 三.使用注意细节 一.引言 之前小编讲了MP从入门到核心功能的使用,接下来这几天小编会把MP在实际项目中,一些常用的高级功能给记录一下. 高级功能分为:逻辑删除.自动填充.乐观锁插件.性能分析插件.多租户SQL解析器.

  • jquery 追加tr和删除tr示例代码

    复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td

  • asp批量添加修改删除操作示例代码

    核心代码: <title>asp批量添加修改删除操作示例</title> <% if request.Form("op")="update" then'表单提交 ids=request.Form("ids") if ids<>"" then response.Write "要删除的数据id集合:"&ids&"<br>"

  • jquery Moblie入门—hello world的示例代码学习

    jquery Moblie入门—hello world的示例代码学习

    1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语句如: 复制代码 代码如下: <link href="Css/jquery.mobile-

  • jquery Mobile入门—外部链接切换示例代码

    jquery Mobile入门—外部链接切换示例代码

    1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

  • spring boot实现软删除的示例代码

    spring boot实现软删除的示例代码

    本文开发环境:spring-boot:2.0.3.RELEASE + java1.8 WHY TO DO 软删除:即不进行真正的删除操作.由于我们实体间的约束性(外键)的存在,删除某些数据后,将导致其它的数据不完整.比如,计算机1801班的教师是张三,此时,我们如果把张三删除掉,那么在查询计算机1801班时,由于张三不存了,所以就会报EntityNotFound的错误.当然了,在有外键约束的数据库中,如果张三是1801班的教师,那么我们直接删除张三将报一个约束性的异常.也就是说:直接删除张三这个

  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下 复制代码 代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin

随机推荐