之前的div怎么display:none

Question

用GridView显了了数据库中的数据，然后点一个字段时，在鼠标旁边的div显示与该字段对应的内容。
前台
<script type="text/javascript" >
    function test(content)
    {
    
    
   var obj = document.createElement("div");
    obj.style.width = "100px";
    obj.style.height = "50px";
    obj.style.border = "1px solid #000000";
    obj.style.background="#FFFFFF";
    obj.style.position = "absolute";
    obj.id="content"    // var obj=document.getElementById("content");
  obj.style.display='block';
  obj.innerHTML = content;
   obj.style.top = document.body.scrollTop + event.clientY + "px";
    obj.style.left = document.body.scrollLeft + event.clientX + "px";
    document.body.appendChild(obj);        
    }
</script>
<div >
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/excel.gif" OnClick="ImageButton1_Click" />
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  CssClass="gv" OnRowDataBound="GridView_RowDataBound">
        <Columns>
            <asp:BoundField DataField="deptnm" HeaderText="deptnm" SortExpression="deptnm" />
            <asp:BoundField DataField="ta_title" HeaderText="ta_title" SortExpression="ta_title"/>
            
            <asp:BoundField DataField="ta_kind" HeaderText="ta_kind" SortExpression="ta_kind" />
         
           <asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
          
          
           
        <asp:BoundField DataField="ta_result" HeaderText="ta_result"SortExpression="ta_result" />
           
            <asp:BoundField DataField="writedt" HeaderText="日期" SortExpression="writedt" />
                       <asp:BoundField DataField="ta_content" >
            <HeaderStyle CssClass="noDisplay" />
            <ItemStyle CssClass="noDisplay" />
            </asp:BoundField>
        </Columns>
        <FooterStyle BackColor="White" ForeColor="White" />
<RowStyle ForeColor="#000066"   HorizontalAlign="Center"  BorderColor="#CCCCCC"/>
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000042" HorizontalAlign="Center"/>
<HeaderStyle BackColor="#66A40C" Font-Bold="True" ForeColor="White" BorderStyle="Solid" />    </asp:GridView> 
    
    
    </div>
后台protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        e.Row.Cells[1].Attributes.Add("onClick", "javascript:test('" + strChange(e.Row.Cells[6].Text) + "');");
        e.Row.Cells[1].Attributes.Add("style", "cursor:hand");
        //Label lb = e.Row.Cells[6].FindControl("Label1");
        //lb.Text = 
    }    public string strChange(string str)
    {
        str = str.Replace(" ", "&nbsp;");
        str = str.Replace("\r\n", "<br>");
        return str;    }
现在点ta_title显示的字段后，会出来对应的ta_content,但是再点一个显示的 字段时，又创造一个div，之前出现的div怎么去掉，只显示当前的

Answer 1

--div
<div id="div1"  style="display:none; background-color:#eeeeee; width:320px; height:100px; position:absolute; z-index:111; border:black solid 1px;">        
</div> --js和jquery function showcontent(content)
     {
       $("#div1").append("内容:"+content); 
       document.getElementById("div1").style.display = "";
       document.getElementById("div1").style.left=event.x;
       document.getElementById("div1").style.top=event.y;
     } function hidecontent()
     {
       $("#div1").empty();
       document.getElementById("div1").style.display = "none";
     }     
改成
 <a href='#' onmouseover="test('<%#Eval("ta_content") %>')" onmouseout="hidecontent()"><%#Eval("ta_title").ToString() %></a>

Answer 2

<asp:BoundField DataField="ta_title" HeaderText="ta_title" SortExpression="ta_title"/> 
 改成 
<a href='#' onmouseover="test(' <%#Eval("ta_content") %>')" onmouseout="hidecontent()"> <%#Eval("ta_title").ToString() %> </a> 改成这样都出错的啊

Answer 3

<script type="text/javascript" > 
    function test(content) 
    {    
    var obj=document.getElementById("content"); 
    if(obj)
    {}
    else
    {
    obj = document.createElement("div"); 
    obj.style.width = "100px"; 
    obj.style.height = "50px"; 
    obj.style.border = "1px solid #000000"; 
    obj.style.background="#FFFFFF"; 
    obj.style.position = "absolute"; 
    obj.id="content"     // var obj=document.getElementById("content"); 
    obj.style.display='block'; 
    document.body.appendChild(obj);         
    }
  obj.innerHTML = content; 
  obj.style.top = document.body.scrollTop + event.clientY + "px"; 
    obj.style.left = document.body.scrollLeft + event.clientX + "px"; 
    
    } 
</script> 

Answer 4

  var obj 写在function外面function里面
if(obj == null)
{
 obj = document.createElement....}

Answer 5

把this作为一个参数穿进去 其实就可以控制了

Answer 6

var obj;
function test(content) 
{ 
if(obj != null) 
{
document.body.removeChild(obj);
}
obj = document.createElement("div"); 
obj.style.width = "100px"; 
obj.style.height = "50px"; 
obj.style.border = "1px solid #000000"; 
obj.style.background="#FFFFFF"; 
obj.style.position = "absolute"; 
obj.id="content"  // var obj=document.getElementById("content"); 
obj.style.display='block'; 
obj.innerHTML = content; 
obj.style.top = document.body.scrollTop + event.clientY + "px"; 
obj.style.left = document.body.scrollLeft + event.clientX + "px"; 
document.body.appendChild(obj); 
}