天天看点

两种方法修改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>

<td>2</td>

<td>小张</td>

<td>25</td>

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

<td>3</td>

<td>小秀</td>

<td>10</td>

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

</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值

     //获取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);

继续阅读