首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

跪求指教Jquery,该如何处理

2012-02-16 
跪求指教Jquery页面代码:HTML codediv idoption1table border1cellspacing0 width100%tr

跪求指教Jquery
页面代码:

HTML code
<div id="option1"><table border="1"  cellspacing="0" width="100%">                    <tr align="center" bgcolor="#ccccff">                        <td>机构名称</td>                        <td>所属部门</td>                        <td>员工人数</td>                        <td>操作</td>                    </tr>                    <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>10人</td>                        <td>                            <input type="button" id="delBtn" name="delBtn" value="删除"/>                            <input type="button" id="updBtn" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>10人</td>                        <td>                            <input type="button" id="delBtn" name="delBtn" value="删除"/>                            <input type="button" id="updBtn" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>10人</td>                        <td>                            <input type="button" id="delBtn" name="delBtn" value="删除"/>                            <input type="button" id="updBtn" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>10人</td>                        <td>                            <input type="button" id="delBtn" name="delBtn" value="删除"/>                            <input type="button" id="updBtn" name="updBtn" value="修改"/>                        </td>                    </tr>                </table></div><div id="option1add" style="display:none;">        <form action="#" method="post">        <table border="1"  cellspacing="0" width="100%">            <tr align="center" bgcolor="#ccccff">                <td>机构名称</td>                <td>所属部门</td>                <td>员工人数</td>                <td>操作</td>            </tr>            <tr align="center">                <td><input type="text" id="name" name="name"/></td>                <td>                    <select id="own">                        <option value="1">资材部</option>                        <option value="2">生管部</option>                        <option value="3">技术部</option>                    </select>                </td>                <td><input type="text" id="num" name="num"/></td>                <td><input type="reset" value="重置"/>                <input type="submit" value="确定"/></td>            </tr>        </table>        </form>    </div> 


我想做的效果:点击每一行的修改Button就把对应的那一行的‘机构名称’‘所属部门’‘员工人数’的值取到,然后赋到下面的id为option1add的div的对应的input中,但是不知道用jquery要怎么写才行,我自己写了个却是获得了全部的数据,汗死了,跪求高人指点!!!

[解决办法]
获取到此行数据,我也是菜鸟,写的东西能实现,效率如何不知道.哈哈.具体怎么赋值应该没问题吧
<script>
$(document).ready(
function(){
$(document).find("#updBtn").click(
function(){
var $td = $(this).parent().parent();
var $val1 = $td.children("td")[0].innerText;
var $val2 = $td.children("td")[1].innerText;
var $val3 = $td.children("td")[2].innerText;
alert($val1+" "+$val2+" "+$val3);
}
);
}
);
</script>
[解决办法]
HTML code
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script><div id="option1"><table border="1"  cellspacing="0" width="100%">                    <tr align="center" bgcolor="#ccccff">                        <td>机构名称</td>                        <td>所属部门</td>                        <td>员工人数</td>                        <td>操作</td>                    </tr>                    <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>11人</td>                        <td>                            <input type="button" name="delBtn" value="删除"/>                            <input type="button" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>12人</td>                        <td>                            <input type="button" name="delBtn" value="删除"/>                            <input type="button" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>122库</td>                        <td>技术部</td>                        <td>10人</td>                        <td>                            <input type="button" name="delBtn" value="删除"/>                            <input type="button" name="updBtn" value="修改"/>                        </td>                    </tr>                                        <tr align="center">                        <td>部品仓库</td>                        <td>资材部</td>                        <td>1110人</td>                        <td>                            <input type="button" name="delBtn" value="删除"/>                            <input type="button" name="updBtn" value="修改"/>                        </td>                    </tr>                </table></div><div id="option1add">        <form action="#" method="post">        <table border="1"  cellspacing="0" width="100%">            <tr align="center" bgcolor="#ccccff">                <td>机构名称</td>                <td>所属部门</td>                <td>员工人数</td>                <td>操作</td>            </tr>            <tr align="center">                <td><input type="text" id="name" name="name"/></td>                <td>                    <select id="own">                        <option value="1">资材部</option>                        <option value="2">生管部</option>                        <option value="3">技术部</option>                    </select>                </td>                <td><input type="text" id="num" name="num"/></td>                <td><input type="reset" value="重置"/>                <input type="submit" value="确定"/></td>            </tr>        </table>        </form>    </div><script>//一个HTML中不能有两个以上相同ID的元素$(":input[name=updBtn]").click(function(){    $("td",this.parentNode.parentNode).each(function(i){        switch(i){            case 0:                $("#name").val(this.innerHTML);                break;            case 1:                $("#own").val($("option[text=" +this.innerHTML+ "]","#own").val());                break;            case 2:                $("#num").val(this.innerHTML);                break;        }    });})</script> 

热点排行