兩種方法修改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;

    });



    

    


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章