添加删除表格append或 createElement
方法一:
js代码:增加一行五列的表格
function AddList(){
$len= document.getElementsByName('goods_name[]').length;
obj = document.getElementById('tab_g');
$str1 = '';
$str2 = '';
$str3 = '';
$str4 = '';
$str5 = '';
newTr = document.createElement('tr');
newTr.id = 'List_'+$len;
newTd1 = document.createElement('td');
newTd2 = document.createElement('td');
newTd3 = document.createElement('td');
newTd4 = document.createElement('td');
newTd5 = document.createElement('td');
newTd1.innerHTML = $str1;
newTd2.innerHTML = $str2;
newTd3.innerHTML = $str3;
newTd4.innerHTML = $str4;
newTd5.innerHTML = $str5;
newTr.appendChild(newTd1);
newTr.appendChild(newTd2);
newTr.appendChild(newTd3);
newTr.appendChild(newTd4);
newTr.appendChild(newTd5);
document.getElementById('tab_g').appendChild(newTr)
}
方法二:
<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="" cellpadding="" cellspacing="" 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=""><input type="submit" value="全部添加" /></td>
</tr>
</table>
添加删除表格append或 createElement的更多相关文章
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- 数据字典的设计--3.首页添加删除表格(JS实现)
页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 添加删除表格(js完成)【自己实际项目】
// 通过dom对象完成 注释掉了 /** function insertRows(){ var tempRow=0; var tbl=document.getElementById("di ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- 点滴积累【JS】---JS小功能(操作Table--动态添加删除表格及数据)
效果: 代码: <head runat="server"> <title></title> <style type="text/ ...
- 动态插入、添加删除表格行的JS代码
<html> <head> <title>Table对象的方法</title> <script language="JavaScript ...
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- java实现批量下载百度图片搜索到的图片
就是写的个小程序,用于记录一下,方便后续查看,首先感谢下面这个博客,从这篇文章衍生的吧,大家可以学习下: http://www.cnblogs.com/lichenwei/p/4610298.html ...
- linux中的输入从定向和输出重定向
linux的标准的输入和输出为如下 我们在 linux中执行命令时,命令默认输出到console中,很多时候我们需要将命令输出到其他设备上如最常见的就文件中去,或者重文件中输入.那这时候就需要用到li ...
- 三维网格补洞算法(Poisson Method)
下面介绍一种基于Poisson方程的三角网格补洞方法.该算法首先需要根据孔洞边界生成一个初始化补洞网格,然后通过法向估算和Poisson方程来修正补洞网格中三角面片的几何形状,使其能够适应并与周围的原 ...
- 关于laravel基础知识
laravel任务管理知识点 1.配置数据库环境 首先要找到congif/app.php,在这里会发现一些全局的系统设置,包括语言,时区等. 重要的是会发现前几个数组都使用了env()这个函数,这个时 ...
- Learning Roadmap of Robotic Operating System (ROS)
ROS Wiki: http://wiki.ros.org/ Robots Using ROS Textbooks: A Gentle Introduction to ROS Learning ROS ...
- 容器化redis高可用方案
偶然看到一个GITHUB项目,提供了一套Docker Compose下的redis Sentinel方案. 项目地址https://github.com/AliyunContainerService/ ...
- Windows phone应用开发[17]-xap提交异常处理
在windows phone 应用提交操作上早在2011年时就写过一篇Windows phone 应用开发[4]-应用发布,那时wp应用提交官方市场的流程繁杂[超过了5步].因为上传和填写应用信息页面 ...
- FFT
void FFT(complex a[],int n,int fl){ ,j=n/;i<n;i++){ if (i<j) {complex t=a[i];a[i]=a[j];a[j]=t; ...
- Android studio下使用SharedSDK
原贴出自:http://bbs.mob.com/thread-5148-1-1.html 首先新建了一个项目用来演示集成ShareSDK 下载好了ShareSDK之后,我们按照下面的步骤使用快 ...
- C语言与内存模型初探
#include<stdio.h> #include<string.h> int main(){ long long int a = 2<<30; char str ...