怎样使用通过JS获取选定的标题，并在一个浮动层中显示

比如页面有a, b , c , d ,e 这5个酒店，每个酒店名称后面有一个“加入”按钮，比如我按a酒店的加入按钮，a的酒店名加入到一个浮动层中，在按c酒店的加入按钮, c酒店也加入到这个浮动层中，并且这个浮动层中还能进行删除操作。这该怎么做啊。求大哥帮忙

解决方案 »

  1.   


     <div id="floatDiv" style="position:absolute; top:10px; left:100px; width:200px; height:100px; background:#EEEEEE"></div>
     <TABLE id="tab">
     <TR>
    <TD>A酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
    <TD>B酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
    <TD>C酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
    <TD>D酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
    <TD>E酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var fd = document.getElementById("floatDiv");
    function add(obj){
    fd.innerHTML += ' <a href="#" onclick="remove(this)">'+ obj.parentNode.previousSibling.innerHTML +'</a> ';
    obj.disabled = true;
    }
    function remove(obj){
    if (confirm("确定要移除 “"+obj.innerHTML+"” 吗？")) {
    fd.removeChild(obj);
    }
    var tab = document.getElementById("tab");
    for (var i=0; i<tab.rows.length; i++) {
    if (tab.rows[i].cells[0].innerHTML == obj.innerHTML) {
    tab.rows[i].cells[1].firstChild.disabled = false;
    break;
    }
    }
    }
    //-->
    </SCRIPT>
      

  2.   


     <style type="text/css">
    *{margin:0;padding:0}
    ul,li{list-style:none}
    #uu{margin-left:10px;margin-top:10px}
    #res{border:1px #333 solid;margin:10px;padding:10px;line-height:24px}
      </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
    var ht = "";
    $(function(){
    $("#uu li").each(function(i){
    $(this).children("a").next(".j").click(function(){
    ht =ht + "<p>"+$(this).prev("a").html()+"&nbsp;<a href='#' onclick=\"del($(this));\" title='del'>del</a></p>";
    $("#res").html(ht);
    })
    })
    })
    function del(o){
    o.parent().remove();
    ht = ""
    }
    </script>
     </head> <body>
     <ul id="uu">
    <li><a href="#" id="a1" title="a酒店">a酒店</a> | <a href="#" class="j">加入</a></li>
    <li><a href="#" id="a2" title="b酒店">b酒店</a> | <a href="#" class="j">加入</a></li>
    <li><a href="#" id="a3" title="c酒店">c酒店</a> | <a href="#" class="j">加入</a></li>
    <li><a href="#" id="a4" title="d酒店">d酒店</a> | <a href="#" class="j">加入</a></li>
     </ul>
      <div id="res">

      </div>
     </body>
      

  3.   

    1楼，点击删除的时候，如果选中取消，被灰掉的按钮又恢复了。
    2楼，可以重复添加    jquery写了一个，希望对楼主有帮助<body>
        <div id="jiu" style="width: 200px;">
            <div>
                <span>荆州饭店</span>
                <input type="button" value="加入" />
            </div>
            <div>
                <span>荆州宾馆</span>
                <input type="button" value="加入" />
            </div>
            <div>
                <span>荆州晶威 </span>
                <input type="button" value="加入" />
            </div>
            <div>
                <span>金 九 龙</span>
                <input type="button" value="加入" />
            </div>
        </div>
        <div id="xuan" style="position: absolute; background-color: Green; top: 10px; left: 180px;">
        </div>
    </body>
    </html>
    <script>
        $(function () {
            //跟id为jiu下面的按钮绑定点击事件
            $("#jiu input[type='button']").bind("click", function () {
                //判断是否添加过
                if ($("#xuan>div span:contains('" + $(this).prev().text() + "')").val() != null) {
                    //alert("已经存在了");
                }
                else {
                    //将点击按钮的父内容。克隆到id为xuan的层里面
                    $(this).parent().clone().appendTo("#xuan");
                    //改变按钮的text
                    $("#xuan").find("input[type='button']").val("删除");
                    //删除
                    $("#xuan").find("input[type='button']").click(function () {
                        $(this).parent().remove();
                    });
                }
            });
        })
    </script>
      

  4.   


    谢谢提醒，还真没注意 :P
    修改了下 <div id="floatDiv" style="position:absolute; top:10px; left:100px; width:200px; height:100px; background:#EEEEEE"></div>
     <TABLE id="tab">
     <TR>
        <TD>A酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
        <TD>B酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
        <TD>C酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
        <TD>D酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     <TR>
        <TD>E酒店</TD><TD><INPUT TYPE="button" VALUE="加入" ONCLICK="add(this)"></TD>
     </TR>
     </TABLE>
        <SCRIPT LANGUAGE="JavaScript">
        <!--
            var fd = document.getElementById("floatDiv");
            function add(obj){
                fd.innerHTML += ' <a href="#" onclick="remove(this)">'+ obj.parentNode.previousSibling.innerHTML +'</a> ';
                obj.disabled = true;
            }
            function remove(obj){
                if (!confirm("确定要移除 “"+obj.innerHTML+"” 吗？")) return;
    fd.removeChild(obj);
    var tab = document.getElementById("tab");
    for (var i=0; i<tab.rows.length; i++) {
    if (tab.rows[i].cells[0].innerHTML == obj.innerHTML) {
    tab.rows[i].cells[1].firstChild.disabled = false;
    break;
    }
    }
            }
        //-->
        </SCRIPT>