跪求指教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>