How to dynamically add and delete tabs labels in javascript _ javascript skills

This article mainly introduces how to dynamically add and delete tabs labels in javascript. The example shows how to dynamically add and delete tabs labels in javascript, involving the operation skills of javascript page elements, for more information about how to dynamically add and delete tabs labels in javascript, see the following example. Share it with you for your reference. The specific implementation method is as follows:

Web conversation
 Script function $ (obj) {var o = typeof (obj) = "object "? Obj: document. getElementById (obj); return o;} function addChannel (ChannelId, LabelText) {var ChatBoardId = "ChatBoard _" + ChannelId; var LabelId = "Label _" + ChannelId; /* if the channel already exists **/if ($ (ChatBoardId) {return; bai};/* Add a control, delete the column 'waiting for client connection' First **/var cell0 = $ ("LabelContainer "). childNodes [0]; if (cell0.id = 'label _ default') $ ("LabelContainer "). removeChild (cell0); $ ("ChatBoardContainer "). appendChild (buildChatBoard (ChatBoardId); $ ("LabelContainer "). appendChild (buildLabel (LabelId, LabelText);/* display the new chat window **/toggChatBoard (ChannelId);}; function buildChatBoard (boardId) {var p = document. createElement ("DIV"); p. id = boardId; p. style. width = "100%"; p. style. height = '8px ';/* p. style. border = '1px solid # ff0000'; **/p. style. overflowY = "scroll"; p. style. padding = "3"; return p;}; function buildLabel (LabelId, LabelText) {var label = document. createElement ("TD"); label. id = LabelId; label. noWrap = true;/* label. width = LabelText. length * 12 + 30;/* + 20 is to leave a position for the close button **/label. height = 22; label. name = LabelText; label. title = "Click here to switch the conversation object"; label. innerHTML = LabelText; var lid = LabelId. substr (LabelId. indexOf () + 2); label. innerHTML + ="R"; Label. style. cursor = "hand";/* label. style. border = "1px solid # CC99FF"; **/label. style. textAlign = "center"; label. style. padding = "2"; label. style. backgroundImage = "url (Images/title2.gif)"; label. onclick = function () {var id = event. srcElement. id; id = id. split () [1]; if (event. srcElement. tagName = 'span ') return; toggChatBoard (id) ;}; label. onmouseover = function () {event. srcElement. oldbg = event. srcElement. style. backgroundImage; event. srcElement. style. backgroundImage = "url (Images/title2_on_green.jpg)" ;}; label. onmouseout = function () {event. srcElement. style. backgroundImage = event. srcElement. oldbg ;}; return label ;}; function toggChatBoard (id) {var boards =$ ("ChatBoardContainer"); for (I = 0; I
 
  
-1) {boards. childNodes [I]. style. display = ''; boards. childNodes [I]. innerHTML = id;} else {boards. childNodes [I]. style. display = 'none' ;};};/* label bar **/var labels =$ ("LabelContainer"); for (I = 0; I
  
   
-1) {labels. childNodes [I]. oldbg = labels. childNodes [I]. style. backgroundImage; labels. childNodes [I]. style. backgroundImage = "url (Images/title2_on_green.jpg)"; var id = labels. childNodes [I]. id; id = id. substr (id. indexOf () + 2); var name = labels. childNodes [I]. name;} else {labels. childNodes [I]. style. backgroundImage = "url (Images/title2.gif)" ;};}; function removeChatBoard (id) {var arChannel =$ ("ChatBoardContainer "). childNodes; for (I = 0; i-1) {$ ("ChatBoardContainer "). removeChild (arChannel [I]) ;};};/* label bar **/var arLabel =$ ("LabelContainer "). childNodes; for (I = 0; i-1) {$ ("LabelContainer "). removeChild (arLabel [I]) ;};}; if ($ ("ChatBoardContainer "). childNodes. length <1) {var td = document. createElement ("TD"); td. innerText = "waiting for client connection .. "; td. align = "center"; td. id = 'label _ default'; $ ("LabelContainer "). appendChild (td); return ;}; var newid = arChannel [0]. id; newid = newid. split () [1]; toggChatBoard (newid) ;}; function scrollLable (action) {if (action =-1) {clearInterval (scrollLableTimer); return ;}; scrollLableTimer = setInterval ("doScrollLable (" + action + ")", 30) ;}; function doScrollLable (action) {var pLabelContainer =$ ('plabelcontainer '); if (action = 1) {if (pLabelContainer. scrollLeft <0) {clearInterval (scrollLableTimer); pLabelContainer. scrollLeft = 0; return;}; pLabelContainer. scrollLeft-= 10;}; if (action = 2) {if (pLabelContainer. scrollLeft> $ ('tblabeliner iner '). clientWidth) {clearInterval (scrollLableTimer); pLabelContainer. scrollLeft = $ ('tblabeliner iner '). clientWidth; return;}; pLabelContainer. scrollLeft + = 10 ;};}; script
   Add tabsadd tabs
   
 

    
  
 
   
 
    
 
     
 
      
 
       
 
        
 
         
 
          
 
           
 
            
Waiting for customer connection...
 
           
 
          
 
         
 
        
78
 
       
 
      
 
     
 
   
 
   
   
    
 
   
 
  
   
 
  
 

Used image title2_on_green.jpg

Title2.gif

I hope this article will help you design javascript programs.