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

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

2013-06-26 
想实现JS动态显示DIV层来修改TABLE行的值哪位教我一下谢谢想实现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
[解决办法]



<!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>
</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="确认更新" />

                </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 () {


            $(".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>


[解决办法]
引用:
<!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可以

热点排行