两种方法修改table表的内容

用两种方法获取和修改table表中数据,代码如下:

第一种方案的思想是,根据table中的当前 tr 的位置来定位,当前修改的tr 。

    第二种方案的思想是,给table中的每个 tr 做一个标记,根据此标记来修改当前的tr 。

 html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>table</title>

<script src="jquery-1.4.4.min.js"></script>

</head>

<body>

<table id="table">

<thead>

<tr><th>id</th><th>name</th><th>sex</th><th>操作</th></tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>小敏</td>

<td>30</td>

<td><a href="javascript:;" data="a">修改1</a></td>

</tr>

<tr>

<td>2</td>

<td>小张</td>

<td>25</td>

<td><a href="javascript:;" data="b">修改2</a></td>

</tr>

<tr>

<td>3</td>

<td>小秀</td>

<td>10</td>

<td><a href="javascript:;" data="c">修改3</a></td>

</tr>

</tbody>

</table>

<div id="update">

<form name="form" data="1">

<input type="text" name="id" />

<input type="text" name="name" />

<input type="text" name="sex" />

<input type="text" name="index" />

<input type="submit" value="修改"/>

</form>

</div>

<script src="table.js"></script>

</body>

</html>

上面的data值在方案一中可以去掉,方案二

点击修改时,信息获取代码:

/*

* 从table中获取需要修改的数据

*/

$("#table tbody a").bind("click",function(){

//1 获取当前对象是哪一个,提交修改时用

var index = $(this).parent().parent().index();

$("form[name=form]").attr("data",index);

//2 传递data值

$("input[name=index]").val($(this).attr("data"));

//给修改框赋值

var id = $(this).parent().parent().find("td").eq(0).text();

var name = $(this).parent().parent().find("td").eq(1).text();

var sex = $(this).parent().parent().find("td").eq(2).text();

$("input[name=id]").val(id);

$("input[name=name]").val(name);

$("input[name=sex]").val(sex);

});

方案一代码:

/*

* 1.将修改的数据赋给页面  根据index标识

*/

$("input[type=submit]").bind("click",function(){

var id = $("input[name=id]").val();

var name = $("input[name=name]").val();

var sex = $("input[name=sex]").val();

//获取标识(第几个)

var index = $("form[name=form]").attr("data");

var tbody = $("#table tbody tr");

tbody.eq(index).find("td").eq(0).text(id);

tbody.eq(index).find("td").eq(1).text(name);

tbody.eq(index).find("td").eq(2).text(sex);

return false;

});

   方案二代码:

/*

* 2.将修改的数据赋给页面  根据data值

*/

$("input[type=submit]").bind("click",function(){

var id = $("input[name=id]").val();

var name = $("input[name=name]").val();

var sex = $("input[name=sex]").val();

//获取data值

var date = $("input[name=index]").val();

$("a[data=‘"+date+"‘]").parent().parent().find("td").eq(0).html(id);

$("a[data=‘"+date+"‘]").parent().parent().find("td").eq(1).html(name);

$("a[data=‘"+date+"‘]").parent().parent().find("td").eq(2).html(sex);

return false;

});

时间: 2024-10-08 07:34:08

两种方法修改table表的内容的相关文章

default.properties里面的属性有两种方法修改

1   在struts.xml中constant中修改 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">

两种方法修改pyhton爬虫的报头

方法一: import urlib.request url = "" headers=("User-Agent","") opener = urllib.request.build_opener() opener.addheaders = [headers] data=open(url).read() 方法二: import urllib.request url = "" req=urllib.request.Request(

pdf文件怎么修改 修改PDF文件的两种方法

都说PDF格式的文件不能修改,我就呵呵了!不管你们信不信,反正我是不信.因为我会修改PDF文件,并且方法还不止一种.想知道我是怎么修改PDF文件的吗?下面我就告诉大家修改PDF文件的两种方法. 方法一 1.方法一就是将PDF文件转换成一种可容易编辑的文档,如:word.excel.ppt等格式,然后再进行编辑,编辑好后再将其转换成PDF格式,是不是很简单!具体是该如何转换的,下面有详细教程. 2.下载一个PDF转换器,并将它安装在电脑上.工具最好是支持双向转换的那种,如:http://www.x

shell 脚本实现乘法口诀表的两种方法——shell与C语言

shell 脚本实现乘法口诀表的两种方法--shell与C语言 话不多说直接给出代码: 1 #!/bin/bash 2 if [ $# -eq 0 ] //用于判断输入的参数个数为0 3 then 4 echo "welcome you!" 5 echo "this is a test with 2 methods to output arbitrarily mux table!" 6 else 7 echo "sorry you input invlia

在装完Linux系统之后自己去修改Swap分区的大小(两种方法)

在装完Linux系统之后自己去修改Swap分区的大小(两种方法) 在安装完Linux系统后,swap分区太小怎么办,怎么可以扩大Swap分区呢?有两个办法,一个是从新建立swap分区,一个是增加swap分区.下面介绍这两种方法: 第一您必须有root权限,过程中一定要很小心,一不小心就破坏了整个硬盘的数据,执行下面的过程之前您需要三思而行,错误操作后的后果由执行者自己承担. 新建swap分区 1.以root身份进入控制台,输入 # swapoff -a          #停止交换分区 2. 用

js阻止表单提交的两种方法

<body>     <form action="clock.html" method="post" onsubmit="return checkLength()">         <p>name:<input type="text" name="user" id="user"></p>         <input t

忘记linux中root密码怎么办?两种方法两步教你轻松搞定修改新的密码(仅限CentOS6.X)

忘记了Linux的系统管理员密码时,可以在本地通过进入单用户模式来重置root密码.两种方法(只需两步)具体步骤如下: 方法一: 在进入grub启动菜单的时候 按"a" 键操作编辑 kernel 参数后面加"single"告诉linux内核以单用户模式运行,回车启动即可.进去后,在命令行输入passwd回车,输入新的密码,重复输入,搞定.重启后输入新的密码即可登录.(注:grub界面时间很短,大概5秒,把握机会,如果不想等的话,在linux启动的时候随便按下一个键例

使用js提交form表单的两种方法

提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document

获取母版页的相关内容有两种方法 --全了

获取母版页的相关内容有两种方法 1 通过findcontrol找控件ID需要在此事件中~因为Page_load中时是先内容页加载然后才是母版页加载    protected void Page_LoadComplete(object sender, EventArgs e)    {        Label2.Text = "现在时间是" + (Master.FindControl("Label1") as Label).Text;        if (Requ