求救！！修改表内容的问题。。一整天了没弄明白怎么做！！没分了帮帮忙把！！

我想实现的功能是在页面上
1、点击编辑按钮后可以操作表的单元格中的内容
2、选中任意一个单元格点击修改按钮弹出一个窗体可以修改该单元格的text和url并返回修改后的内容。



<body  style="text-align:center;"  onload="losefocus()"  link="#0033cc" vlink="#0033cc">

    <div>

     <table class="right" border=2 style="border-color:Green" bgcolor="White">

     <tr><td class="style11"><a target="_blank" href="http://www.baidu.com">百　度</a></td>

          <td class="style12"><a target="_blank" href="http://www.sina.com.cn">新　浪</a></td>

          <td class="style13"><a target="_blank" href="http://www.qq.com">腾　讯</a></td><td class="style14"><a target="_blank" href="http://www.sohu.com">搜　狐</a></td>

           <td class="style15"><a target="_blank" href="http://www.163.com">网　易</a></td><td><a target="_blank" href="http://www.google.com.hk/">谷　歌</a></td></tr>

      <tr><td class="style11"><a target="_blank" href="http://www.ifeng.com/">凤 凰 网</a></td>

          <td class="style12"><a target="_blank" href="http://www.cntv.cn/index.shtml">央 视 网</a></td>

           <td class="style13"><a target="_blank" href="http://www.xinhuanet.com">新 华 网</a></td>

           <td class="style14"><a target="_blank" href="http://www.people.com.cn">人 民 网</a></td>

           <td class="style15"><a target="_blank" href="http://10086.cn/">中国移动</a></td><td><a target="_blank" href="http://www.gov.cn">中国*网</a></td></tr>

        </table>

       div>

 <br />

   <br />

	<input id="btn1" type="button" value="编辑" />

        <input id="btn3" type="button" value="修改"  />

        <input id="btn2" type="button" value="完成" />

        

</body>

10 个解决方案

#1

链接啊？

#2

哥不知道你想做啥

#3

如果你要是想修改

http://10086.cn/ 中国移动

这二个值的话用jquery简单

#4

#5

给你们一段代码：
我的目的是为了把页面上的编辑td内容和修改链接放到一个弹出窗口去。
[img=C:\Documents and Settings\Administrator\桌面][/img]

可以随便编辑表格的任意单元格中的内容。



<html>

<head>

    <title></title>

    

</head>

<body>

    <div>

<table border="1">

<tr><td class="style11"><a target="_blank" href="http://www.baidu.com">百　度</a></td>

    <td ><a target="_blank" href="http://www.sina.com.cn">新　浪</a></td>

    <td><a target="_blank" href="http://www.qq.com">腾　讯</a></td>

    <td><a target="_blank" href="http://www.sohu.com">搜　狐</a></td>

    <td><a target="_blank" href="http://www.163.com">网　易</a></td>

    <td><a target="_blank" href="http://www.google.com.hk/">谷　歌</a></td></tr>

<tr><td><a target="_blank" href="http://www.ifeng.com/">凤 凰 网</a></td>

    <td><a target="_blank" href="http://www.cntv.cn/index.shtml">央 视 网</a></td>

    <td><a target="_blank" href="http://www.xinhuanet.com">新 华 网</a></td>

    <td><a target="_blank" href="http://www.people.com.cn">人 民 网</a></td>

    <td><a target="_blank" href="http://10086.cn/">中国移动</a></td>

    <td><a target="_blank" href="http://www.gov.cn">中国*网</a></td></tr>

</table>      

</div>

<input id="btn1" type="button" value="编辑" onclick="edit();" />

<input id="btn2" type="button" value="完成" onclick="editok();" />

<input id="btn3" type="button" value="链接" onclick="fn_creatlink();" disabled="false" />

</body>

</html>

<script>

        function Cookie() {};

        Cookie.setCookie = function(dis, name, value, years, days, hours) {

            years=years || 0;

            days = days || 0;

            hours = hours || 2;

            var expTime = new Date();

            expTime.setFullYear(expTime.getFullYear()+years);

            expTime.setDate(expTime.getDate() + days);

            expTime.setHours(expTime.getHours() + hours);

            ct= escape(name) + "=" + escape(value) +

            ";" + "expires=" + expTime.toGMTString();

            document.cookie=ct;

            if(dis=="yes"){alert(ct);}

        };        

        Cookie.getCookie = function(name) {

            var rs = document.cookie.match(

                new RegExp("(?:^| )" + escape(name) + "=([^;]*)(?:;|$)", "i")

            );

            return rs ? unescape(rs[1]) : undefined;

        }

        if(Cookie.getCookie("nehnre")){

            var div = document.getElementsByTagName("div")[0];

            div.innerHTML = Cookie.getCookie("nehnre");

            

        }

        function edit(){

           

            var div = document.getElementsByTagName("div")[0];

            div.className="chatBox_editArea";

            div.contentEditable="true";

            document.getElementsByTagName("input")[2].disabled=false;

         

        }

        function editok(){

            var div = document.getElementsByTagName("div")[0];

            div.className="";

            div.contentEditable="false";

            document.getElementsByTagName("input")[2].disabled=true;

            Cookie.setCookie("","nehnre",div.innerHTML,1,0,0);

        }

        function fn_creatlink(){

            document.execCommand('CreateLink',true,'true');

        }

    </script>

#6

引用楼主 a6389639 的回复:

我想实现的功能是在页面上
1、点击编辑按钮后可以操作表的单元格中的内容
2、选中任意一个单元格点击修改按钮弹出一个窗体可以修改该单元格的text和url并返回修改后的内容。

HTML code

<body style="text-align:center;" onload="losefocus()" link="#0033cc" vlink="#0033cc">
……

没有弹出窗体、弹出了层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("td").bind("dblclick",function(){
                var temObj=$(this);
                var url=$(this).find("a").attr("href");
                var text=$(this).find("a").attr("innerText");
                $("#zz").fadeIn(300,function(){$("#123").fadeIn(500)});

                $("#nm").attr("value",text);
                $("#url").attr("value",url);

                $("#sm").bind("click",function(){
                    //funciton(){判断};

                    $("#123").fadeOut(300,function(){$("#zz").fadeOut(300,function(){

                    temObj.find("a").attr("innerText",$("#nm").val());
                    temObj.find("a").attr("href",$("#url").val());
                        });
                    });
                })
            });
        });
    </script>
    <style type="text/css">
        td{width:100px; height:35px;}
    </style>
</head>
<body  style="text-align:center; margin:0px; padding:0px;"  onload="losefocus()"  link="#0033cc" vlink="#0033cc">
    <div>
     <table border=2 style="border-color:Green; margin:0px auto; margin-top:50px;" bgcolor="White">
     <tr><td><a target="_blank" href="http://www.baidu.com">百　度</a></td>
          <td><a target="_blank" href="http://www.sina.com.cn">新　浪</a></td>
          <td><a target="_blank" href="http://www.qq.com">腾　讯</a></td><td><a target="_blank" href="http://www.sohu.com">搜　狐</a></td>
           <td><a target="_blank" href="http://www.163.com">网　易</a></td><td><a target="_blank" href="http://www.google.com.hk/">谷　歌</a></td></tr>
      <tr><td><a target="_blank" href="http://www.ifeng.com/">凤凰网</a></td>
          <td><a target="_blank" href="http://www.cntv.cn/index.shtml">央视网</a></td>
           <td><a target="_blank" href="http://www.xinhuanet.com">新华网</a></td>
           <td><a target="_blank" href="http://www.people.com.cn">人民网</a></td>
           <td><a target="_blank" href="http://10086.cn/">中国移动</a></td><td><a target="_blank" href="http://www.gov.cn">中国*网</a></td></tr>
        </table>
       </div>
       <div id="zz" style="position:absolute; z-index:111px; top:0px; left:0px; width:100%; height:650px; background-color:Black; filter:alpha(opacity=30); display:none;">
       </div>
       <div id="123" style="display:none; z-index:999px; width:350px; border:solid 1px red; position:absolute; background-color:White; left:300px;">
            <table width="350">
                <tr><td>Name：<input type="text" id="nm" style="width:275px;"/></td></tr>
                <tr><td>URL：<input type="text" id="url" style="width:280px;" /></td></tr>
                <tr><td><input type="button" id="sm" value="save"/></td></tr>
            </table>
       </div>
</body>

</html>

#7

双击单元格

#8

引用 6 楼 kk297173176 的回复:

HTML code

<body style="text-align:center;" onload="losefocus()" link="#0033cc" vli……

6楼代码不起作用啊

#9

有点难度啊

要用JS读取TABLE下的值。。

然后通过ID 读取值在修改这些。。
这样做不如直接用控件算了。。

简单的JS

<body>
<table width="223" height="123" border="1" id="div_ta">
  <tr>
    <td><div id="div1">div1</div></td>
    <td><div id="div2">div2</div></td>
    <td><div id="div3">div3</div></td>
  </tr>
  <tr>
    <td><div id="div4">div4</div></td>
    <td><div id="div5">div5</div></td>
    <td><div id="div6">div6</div></td>
  </tr>
  <tr>
    <td><div id="div7">div7</div></td>
    <td><div id="div8">div8</div></td>
    <td><div id="div9">div9</div></td>
  </tr>
</table>

</body>
<script>
var div_data=document.getElementById("div_ta").getElementsByTagName("div");
for(var i=0;i<div_data.length;i++)
{
alert("第"+(i+1)+"个的ID="+div_data[i].id);
}
</script>

#10

该回复于2011-05-13 14:37:09被版主删除

#1