青年人，应该做怎样的青年人

<```html>
<```head>
<```META http-equiv=Content-Type content="text/html; charset=gb2312">
<```link rel="stylesheet" href="table.css">
<```script language="javascript" src="useful.js"><```/script>
<```script language="javascript" type="text/javascript">
/**
An Editable Table.Edit Area Only :INPUTBOX-TEXT
author: metaphy
begin:  2007-6-26
version:0.025   |sort by title DOESN'T work !
*/
function EditableTableObject() {
 var ROW_SPLIT_TAG = '#' ;
 var CELL_SPLIT_TAG = '`' ;
 var TAB ;
 var HAS_CHECK_BOX ; 
 var SINGLTON_INPUTBOX ;
 var AVG_CELL_WIDTH ;
 
 /**
  INIT  CREATE THE TABLE ELEMENT
 */
 this.createTable = function (tableId,titles ,hasCheckbox){
  var tb = document.getElementById(tableId) ;
  if (tb){
   alert("table["+tableId+"] has existed!") ; 
   return ;
  }
  tb = document.createElement("table");
  tb.id = tableId ;
  tb.cellPadding = 1 ;
  tb.cellSpacing = 1 ;
  tb.className= "TabStyle" ;
  document.body.appendChild(tb);
        var inrow= tb.insertRow(-1) ;
        inrow.className = "TabStyleHeader" ;
       
        if (hasCheckbox){
         AVG_CELL_WIDTH =  (100-2)/titles.length  ;
        
         var cell = inrow.insertCell(-1) ;
         cell.width = '2%' ;
       cell.innerHTML = "<```input type='checkbox'/>" ;
       cell.childNodes[0].onclick = function(){ //checkbox.onclick   
        var sel = tb.rows[0].cells[0].childNodes[0].checked ;
        for(var i =0 ; i<```tb.rows.length; i++){
         tb.rows[i].cells[0].childNodes[0].checked = sel ; 
        }
       }
      }else{
       AVG_CELL_WIDTH =  (100-0)/titles.length  ;
      }
       
      //append titles
        for (var i =0 ;i<```titles.length; i++) {
         var cell= inrow.insertCell(-1) ;
   cell.innerHTML = '<```b>' +titles[i] + '<```/b>' ;
   cell.width = AVG_CELL_WIDTH + "%" ;
   //when double-click the title ,sort by the title value , from smaller to bigger
   //auto judge sort by NUMBER or STRING
   cell.ondblclick = function (){  
    return false ;
    if (tb.rows.length <```=2 ) return false;
    if (SINGLTON_INPUTBOX) {
     alert('Please cancel the editing-inputbox.') ;
     return false ;
    }
    
    var list = new Array() ;
    var cellDex = this.cellIndex;
    var sortTypeNum = true;
    
    if(isNaN(tb.rows[1].cells[cellDex].innerHTML)){
     sortTypeNum = false ;
    }
    
    for (var i =1 ; i <``` tb.rows.length ;i++) {
     var trow = tb.rows[i] ;
     var listLen = list.length ;
     //debug ("i = "+ i + "; listLen=" + listLen ) ;
     if ( listLen <``` 1 ){
      list[0] = trow ;
      continue ;
     }
     for ( var m =0 ; m <``` listLen ; m++ ){
      var shouldInsert = false  ;
      if (sortTypeNum){
       if (Number(trow.cells[cellDex].innerHTML) <``` Number(list[m].cells[cellDex].innerHTML))
        shouldInsert = true ;       
      }else{
       if (String(trow.cells[cellDex].innerHTML) <``` String(list[m].cells[cellDex].innerHTML))
        shouldInsert = true ; 
      }
      if (shouldInsert){
       for( var n = listLen ; n > m ;n --){
        list[n] =list[n - 1] ;
       }
       list[m]= trow ;
       break ; 
      }
     }
     if( m == listLen){ //append this at last
      list[m] = trow ;
     }
    }
    
    //modify sorted data
    for ( var i =0 ; i<``` list.length ;i++){
     for (var j =0 ;j <``` tb.rows[0].cells.length ; j++){
      debug ('i=' + i);
      debug ('j=' + j ) ;
      alert(list[i].cells[j].innerHTML) ;
      tb.rows[i+1].cells[j].innerHTML = list[i].cells[j].innerHTML ;
      //tb.rows[i+1] = list[i] ;
     }
    }
   }
     }
  this.HAS_CHECK_BOX = hasCheckbox ;
  this.TAB = tb ;
 }
 
 /**
  clear all data ,remain the header
 */
 this.clearData = function (){
  var tb = this.TAB ;
  if (this.HAS_CHECK_BOX) tb.rows[0].cells[0].childNodes[0].checked = false ;
  if(tb.rows.length <``` 2) return ;
  
  var clearRows = tb.rows.length;
  while(clearRows > 1 ){
   tb.deleteRow(1) ;
   clearRows -- ;
  }
 }
 
 /**
  ADD AN EMPTY ROW
 */
 this.addEmptyRow = function(){
  var contents = new Array();
  for (var i = 0 ; i<``` this.TAB.rows[0].cells.length -1 ;i ++ )
   contents[i] = '' ;
  
  if(!this.HAS_CHECK_BOX) contents[i] = '' ;
  
  this.addRow(contents) ;
 }
 
 /**
  ADD A NEW ROW WIHT CONTENTS
 */
 this.addRow = function(contents){
  var colsNum = 0 ;
  var me = this ;
  var _hasCheckbox = this.HAS_CHECK_BOX ;
  var tb = this.TAB ;
  if(tb.rows[0] ){
   colsNum = tb.rows[0].cells.length ;
  }
  var styl = tb.rows.length % 2 == 0 ? "TabStyleRow" :"TabStyleRow_" ;
  var inrow=tb.insertRow(-1) ;
  inrow.className = styl ;
  if(_hasCheckbox){
      var cell = inrow.insertCell(0) ;
         cell.width = '2%' ;
       cell.innerHTML = "<```input type='checkbox' />" ;
       cell.childNodes[0].checked = tb.rows[0].cells[0].childNodes[0].checked ;
      }
      
      //add TABLE content
      for(var i = 0 ; i<```contents.length ; i++){
       var cell = inrow.insertCell(-1) ;
       
       cell.innerHTML = contents[i] ;
       cell.ondblclick = function (){ //Edit the cell .
    if (!SINGLTON_INPUTBOX){  //first instance the inputbox
         SINGLTON_INPUTBOX = document.createElement("input");
         SINGLTON_INPUTBOX.type = "text" ;
         SINGLTON_INPUTBOX.className ='SINPUTBOX';
         SINGLTON_INPUTBOX.id = inrow.rowIndex + "_" + this.cellIndex;
         
         SINGLTON_INPUTBOX.onkeydown = function(){
          //debug(event.keyCode);
          var indexArr = SINGLTON_INPUTBOX.id.split( "_");
          //debug (indexArr[0]);
          //debug (indexArr[1]);
          
          switch(event.keyCode){
          case 27:   //Esc
           SINGLTON_INPUTBOX.style.display = "none";
           var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
           lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
           SINGLTON_INPUTBOX = null ;
           break ;
          case 13:
          case 39:  //Enter,Right
           var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
           lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
           if(indexArr[1]<```tb.rows[0].cells.length -1 ){ //move to next cell
            var intt = Number(indexArr[1])+1 ;
            var nextCell =  tb.rows[indexArr[0]].childNodes[intt] ;
            SINGLTON_INPUTBOX.id = indexArr[0] + "_" + nextCell.cellIndex;
            SINGLTON_INPUTBOX.value = nextCell.innerHTML ;
            nextCell.innerHTML=  '';
            
            nextCell.appendChild(SINGLTON_INPUTBOX);
            window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50)  ;
       }else if(indexArr[0]<``` tb.rows.length ){  //move to next row
        if (indexArr[0]== tb.rows.length-1){  //if tail,append a new row
         me.addEmptyRow();
        }
        var intt = Number(indexArr[0])+1 ;
        var cellDex = _hasCheckbox ? 1 : 0 ;
        var nextCell =  tb.rows[intt].childNodes[cellDex] ;
        SINGLTON_INPUTBOX.id = intt + "_" + nextCell.cellIndex;
        SINGLTON_INPUTBOX.value = nextCell.innerHTML ;
            nextCell.innerHTML=  '';
             
            nextCell.appendChild(SINGLTON_INPUTBOX);
            window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50)  ;
           }else{
            SINGLTON_INPUTBOX.style.display = "none";
            SINGLTON_INPUTBOX = null ;
           }
           break ;
          case 37:  //LEFT
           var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
           lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
           if(_hasCheckbox && indexArr[1] > 1 ||
               !_hasCheckbox && indexArr[1] > 0){ //move to prior cell
        var intt = Number(indexArr[1]) - 1 ;
            var priorCell =  tb.rows[indexArr[0]].cells[intt] ;
            SINGLTON_INPUTBOX.id = indexArr[0] + "_" + priorCell.cellIndex;
            SINGLTON_INPUTBOX.value = priorCell.innerHTML ;
            priorCell.innerHTML=  '';
             
            priorCell.appendChild(SINGLTON_INPUTBOX);
            window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50); 
           }else if((_hasCheckbox && indexArr[1] == 1 ||  //move to prior row 
               !_hasCheckbox && indexArr[1] == 0 ) && indexArr[0]>1){              
            var intt = Number(indexArr[0]) - 1 ;
            var ints = _hasCheckbox ? contents.length :contents.length-1  ;
            var priorCell =  tb.rows[intt].cells[ints] ;
            SINGLTON_INPUTBOX.id = intt + "_" + priorCell.cellIndex;
            SINGLTON_INPUTBOX.value = priorCell.innerHTML ;
            priorCell.innerHTML=  '';
            
            priorCell.appendChild(SINGLTON_INPUTBOX);
            window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50); 
           }else{
            SINGLTON_INPUTBOX.style.display = "none";
            SINGLTON_INPUTBOX = null ;
           }
           break ;
           
          case 38: //UP KEY
           var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
           lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
           var intt = Number(indexArr[0]) ;
           var ints = Number(indexArr[1]) ;
           if (intt >= 2){
            intt -- ; 
           } else {
            intt =  tb.rows.length -1 ;
           }
           var priorCell =  tb.rows[intt].cells[ints] ;
           SINGLTON_INPUTBOX.id = intt + "_" + priorCell.cellIndex;
           SINGLTON_INPUTBOX.value = priorCell.innerHTML ;
           priorCell.innerHTML=  '';
           priorCell.appendChild(SINGLTON_INPUTBOX);
           window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50); 
           
           break ;
          case 40: //DOWN KEY
           var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
           lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
           var intt = Number(indexArr[0]) ;
           var ints = Number(indexArr[1]) ;
           if (intt <```  tb.rows.length -1){
            intt ++ ; 
           } else {
            intt = 1 ;
           }
           var priorCell =  tb.rows[intt].cells[ints] ;
           SINGLTON_INPUTBOX.id = intt + "_" + priorCell.cellIndex;
           SINGLTON_INPUTBOX.value = priorCell.innerHTML ;
           priorCell.innerHTML=  '';
           priorCell.appendChild(SINGLTON_INPUTBOX);
           window.setTimeout("document.getElementById('"+SINGLTON_INPUTBOX.id+"').focus();", 50); 
           break ;
          }
         }
        }else{
         if(SINGLTON_INPUTBOX.id == inrow.rowIndex + "_" + this.cellIndex){ 
          return ;
         }else{
          var indexArr = SINGLTON_INPUTBOX.id.split( "_");
          var lastCell = tb.rows[indexArr[0]].cells[indexArr[1]] ;
          lastCell.innerHTML =  SINGLTON_INPUTBOX.value ;
          SINGLTON_INPUTBOX.value = '' ;
          SINGLTON_INPUTBOX.id = inrow.rowIndex + "_" + this.cellIndex;
         }
        }
        var txt = this.innerHTML ;
        this.innerHTML = '' ;
        SINGLTON_INPUTBOX.value = txt ;
        this.appendChild(SINGLTON_INPUTBOX);
        SINGLTON_INPUTBOX.focus() ;
   }
      }
 }
 
 
 /**
  DELETE SELECTED ROW(S),TABLE SHOULD HAVE A CHECKBOX
  THE INPUTBOX ALSO BE DELETED IF IT WAS INCLUDED THE SELECTED ROW
 */
 this.delRow = function(){
  var rownum = this.TAB.rows.length ;
  var arr = new Array() ;
  var j = 0 ;
  var info = "Are you sure to delete row: " ;
  if(!this.HAS_CHECK_BOX || rownum<```1 ) return false ;
  
  var inputboxRow = -1 ;
  if(SINGLTON_INPUTBOX){
   var indexArr = SINGLTON_INPUTBOX.id.split( "_"); 
   inputboxRow = indexArr[0] ;
  }
  //debug('all rows(including header):'+rownum) ;
  for(var i = 1 ; i<```rownum ; i++){
   var checkboxx = this.TAB.rows[i].cells[0].childNodes[0] ;
   if (checkboxx.checked) {
    //deal with the inputbox
    if(inputboxRow == i){
     SINGLTON_INPUTBOX = null ;
    }
    //record delete row_no
    arr[j++] = i ;
    if(j>1)  info += ",";
    info += i;
   }
  }
  if(arr.length<```1)  return false ;
  
  info += "?" ;
  if (!confirm (info) ) {  
   return false ;
  }
  for (var x =0 ;x <``` arr.length; x++){
   //debug(arr[x]);
   this.TAB.deleteRow(arr[x]);
   if(x<```arr.length-1)  arr[x+1] = arr[x+1] - x -1; 
  }
  if(this.HAS_CHECK_BOX && this.TAB.rows.length ==1
     && this.TAB.rows[0].cells[0].childNodes[0].checked){ //cancel select-all tag
   this.TAB.rows[0].cells[0].childNodes[0].checked = false ;
  }
 }
 
 /**
  GET TABLE CONTENTS WITH LINE SPLITTER:ROW_SPLIT_TAG; CELL SPLITTER: CELL_SPLIT_TAG
 */
 this.getContent = function(){
  var tb = this.TAB ;
  if (!tb || !tb.rows[0])  return '';
  var val ='' ;
  var rowsNum = tb.rows.length  ;
  var colsNum = tb.rows[0].cells.length ;
  
  if(!this.HAS_CHECK_BOX){
   for(var i= 1 ; i<``` rowsNum ; i++){
    for(var j= 0; j<```colsNum ; j++){
     if(tb.rows[i].cells[j].childNodes[0] && tb.rows[i].cells[j].childNodes[0].value){
      val += tb.rows[i].cells[j].childNodes[0].value ;
     }else{
      val += tb.rows[i].cells[j].innerHTML;
     }
     if (j!=colsNum -1) val+= CELL_SPLIT_TAG ;  
    } 
    if(i!=rowsNum -1 ) val += ROW_SPLIT_TAG ;
   }
  }else{
   for (var i = 1; i<```rowsNum ; i++){
    if(this.TAB.rows[i].cells[0].childNodes[0].checked ){
     if(val.length>0) val += ROW_SPLIT_TAG ;
     for(var j= 1; j<```colsNum; j++){
      if(tb.rows[i].cells[j].childNodes[0] && tb.rows[i].cells[j].childNodes[0].value){
       val += tb.rows[i].cells[j].childNodes[0].value ;
      }else{
       val += tb.rows[i].cells[j].innerHTML;
      }
      if (j!=colsNum -1) val+= CELL_SPLIT_TAG ;
     }
    }
   }
  }
  alert(val) ;
  return val ;
 }
}

function addrow(te){
   te.addRow(['1','aab.com','xyz@ibn.com','77889999','something','']) ;
  te.addRow(['2','aab.com','xyz@ibN.com','77889999','something','']) ;
  te.addRow(['3','aab.com','xyz@ibn.com','77889999','something','']) ;
  te.addRow(['4','aab.com','xyz@ibn.com','77889999','something','']) ;
}

<```/script>

<```/head>

<```body>
<```input type='button' id='btn1' value='add row(s)' onclick='addrow(te);' >
<```input type='button' id='btn1_1' value='add empty row'  onclick = 'te.addEmptyRow() ;'>
<```input type='button' id='btn2' value='delete row(s)' onclick="te.delRow();">
<```input type='button' id='btn3' value='clear data' onclick="te.clearData();">
<```input type='button' id='btn4' value='contents'  onclick = 'te.getContent() ;'>

<```script>
 var titles = ['Name','Domain','Email','Telphone','Remark','RemarkII'];
 var te = new EditableTableObject() ;
 te.createTable('testTable',titles,   10   ) ;
 addrow(te) ;
 
 
<```/script>
<```/body>
<```/html>