想实现JS动态显示DIV层来修改TABLE行的值哪位教小弟我一下多谢

想实现JS动态显示DIV层来修改TABLE行的值哪位教我一下谢谢

想实现JS动态显示DIV层来修改TABLE行的值
比如定了了这么一下DIV层
<div id="youhuaDivTmp" style="display:none">
<table id="youhuaDivTb">
<tr class="optimizationSetBox">
<td colspan="7">
</td>
<td></td>
</tr>
</table>
</div>

要求点击下面表格中的立即优化，就在TR下方显示出上面的DIV层来进行修改TD中的值
<TABLE>
<tr>
<td>aaaa</td>
<td><button class="btn btnGreen_c r5" >立即优化</button></td>
</tr>
<tr>
<td>bbbb</td>
<td><button class="btn btnGreen_c r5" >立即优化</button></td>
</tr>
<tr>
<td>cccc</td>
<td><button class="btn btnGreen_c r5" ></button></td>
</tr>
</table>

点一下立即优化，就显示出上面定义的DIV来修改AAAA的内容，
不知哪位老师能帮我实现上面的功能，如果功能有写完整包含例子和一些注解我愿意出RMB50 酬谢 JavaScript
[解决办法]



&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;
    &lt;title&gt;系统在线注册&lt;/title&gt;
    &lt;script src="Scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="youhuaDivTmp" style="display: none"&gt;
        &lt;table name="youhuaDivTb"&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;input type="text" id="txtNewValue" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;input type="button" name="btnUpdate" value="确认更新" /&gt;

                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;


    &lt;table id="testTable"&gt;
        &lt;tr&gt;
            &lt;td&gt;aaaa&lt;/td&gt;
            &lt;td&gt;
                &lt;button class="btn btnGreen_c r5"&gt;立即优化&lt;/button&gt;&lt;/td&gt; 
 
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;bbbb&lt;/td&gt;
            &lt;td&gt;
                &lt;button class="btn btnGreen_c r5"&gt;立即优化&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;cccc&lt;/td&gt;
            &lt;td&gt;
                &lt;button class="btn btnGreen_c r5"&gt;立即优化&lt;/button&gt;&lt;/td&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;script&gt;
        $(function () {


            $(".btnGreen_c").click(function () {
                $("#testTable").find("table[name='youhuaDivTb']").parents("tr").remove();
                var template = $("#youhuaDivTmp").html();
                $("&lt;tr&gt;&lt;td&gt;" + template + "&lt;/td&gt;&lt;/tr&gt;").insertAfter($(this).parents("tr"));
            });

            $("input[name='btnUpdate']").live("click", function () {
                var newValue = $(this).parents("tr").prev("tr").find("td input").val();

                var index = $("#testTable").find("table[name='youhuaDivTb']").parents("tr").index();
                $("#testTable tr:eq(" + parseInt(index - 1) + ")").find("td:nth-child(1)").text(newValue);

            });
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

[解决办法]

引用:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>系统在线注册</title>

<script src="Scripts/jquery-1.8.2.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
function closediv(){
alert("in");//调试用测试是否有调用本函数
document.getElementById("youhuaDivTmp").style.display="none";

}
</script>

</head>
<body>

<div id="youhuaDivTmp" style="display: none">
<table name="youhuaDivTb">
<tr>
<td>
<input type="text" id="txtNewValue" /></td>
</tr>
<tr>
<td>
<input type="button" name="btnUpdate" value="确认更新" />
<input type="button" name="myclose" id="myclose" value="关闭DIV" />
<input name="gfind1" id="gfind1" type="button" class="button" value="开始查询" >

</td>
</tr>
</table>
</div>

<table id="testTable">
<tr>
<td>aaaa</td>
<td>
<button class="btn btnGreen_c r5">立即优化</button></td>
</tr>
<tr>
<td>bbbb</td>
<td>
<button class="btn btnGreen_c r5">立即优化</button></td>
</tr>
<tr>
<td>cccc</td>
<td>
<button class="btn btnGreen_c r5">立即优化</button></td>
</td>
</tr>
</table>
<script>
$(function () {
$("#gfind1").click(function() {
// 验证代码
alert("为什么这里无效果呢进不了这里");

});

$("input[name='gfind1']").live("click", function () {
alert("为什么只能用这一句才行");

})

$("input[name='myclose']").live("click", function () {
alert("请输入正确的数字，不要乱输噢");
$("#testTable").find("table[name='youhuaDivTb']").parents("tr").remove();
});

$(".btnGreen_c").click(function () {
$("#testTable").find("table[name='youhuaDivTb']").parents("tr").remove();
var template = $("#youhuaDivTmp").html();
$("<tr><td>" + template + "</td></tr>").insertAfter($(this).parents("tr"));
});

$("input[name='btnUpdate']").live("click", function () {
var newValue = $(this).parents("tr").prev("tr").find("td input").val();

var index = $("#testTable").find("table[name='youhuaDivTb']").parents("tr").index();
$("#testTable tr:eq(" + parseInt(index - 1) + ")").find("td:nth-child(1)").text(newValue);

});
})
</script>
</body>
</html>

我新增加了一个按钮

<input name="gfind1" id="gfind1" type="button" class="button" value="开始查询" >
为什么对这个按钮的单击响应事件，只有用
$("input[name='gfind1']").live("click", function () {
alert("为什么只能用这一句才行");

}) 这段才行
用下面这一段正常理解也没错啊，可就是不行，
$("#gfind1").click(function() {
// 验证代码
alert("为什么这里无效果呢进不了这里");

});

麻烦看一下这个是为什么谢谢

因为开始input是被隐藏了的，给它加click加不上，用live或delegate可以

想实现JS动态显示DIV层来修改TABLE行的

热点推荐