create_table.html

javascript在线编辑器

	document.getElementById(id + ' on').style.display = 'block';
	
	// Assign value to <input type="hidden" id="borderWidth">
	document.all['borderWidth'].value = id;
} 


/* ---------------------------------------------------------------------- *\
  Function    : hideOnBorderStyles()
  Description : Hides any table cell with an ID of "borderstyle on" 
	              (e.g. "dashed on").
\* ---------------------------------------------------------------------- */
function hideOnBorderStyles() {

  var onBorderStyles = new Array();
    onBorderStyles[0] = "No Border on";
    onBorderStyles[1] = "solid on";
    onBorderStyles[2] = "dashed on";
		onBorderStyles[3] = "dotted on";
		onBorderStyles[4] = "double on";
		onBorderStyles[5] = "inset on";
		onBorderStyles[6] = "outset on";
		onBorderStyles[7] = "groove on";
		onBorderStyles[8] = "ridge on";
	
  for (var j = 0; j < onBorderStyles.length;) {
    document.getElementById(onBorderStyles[j]).style.display = 'none';
	  j++;
  }
}



/* ---------------------------------------------------------------------- *\
  Function    : showOffBorderStyles()
  Description : Shows all table cells with an ID of "borderstyle" 
	              (e.g. "solid"). 
\* ---------------------------------------------------------------------- */
function showOffBorderStyles() {

  var offBorderStyles = new Array();
    offBorderStyles[0] = "No Border";
    offBorderStyles[1] = "solid";
    offBorderStyles[2] = "dashed";
		offBorderStyles[3] = "dotted";
		offBorderStyles[4] = "double";
		offBorderStyles[5] = "inset";
		offBorderStyles[6] = "outset";
		offBorderStyles[7] = "groove";
		offBorderStyles[8] = "ridge";
	
  for (var j = 0; j < offBorderStyles.length;) {
    document.getElementById(offBorderStyles[j]).style.display = 'block';
	  j++;
  }
}



/* ---------------------------------------------------------------------- *\
  Function    : selectBorder()
  Description : Selects the border style to be used in the output table.
	Usage       : selectBorder("dashed")
\* ---------------------------------------------------------------------- */
function selectBorder(id) {
  
	// Hide the currently selected border style
  hideOnBorderStyles();
	
	// Show all of the border style options as unselected
	showOffBorderStyles();
	
	// Hide the "off" element and replace with an "on" element so option appears selected
	document.getElementById(id).style.display = 'none';
	document.getElementById(id + ' on').style.display = 'block';
	
	// Assign value to <input type="hidden" id="borderStyle">
	document.all['borderStyle'].value = id;
} 
 


/* ---------------------------------------------------------------------- *\
  Function    : hideColorMenus()
  Description : Hide the menus used for selecting the border color and 
	              shading color. 
\* ---------------------------------------------------------------------- */
function hideColorMenus() {
  document.all.borderColorMenu.style.display = "none";
	document.all.shadingColorMenu.style.display = "none";
}


/* ---------------------------------------------------------------------- *\
  Function    : showBorderColorMenu()
  Description : Show the border color menu so user can select the table's 
	              border color. 
\* ---------------------------------------------------------------------- */
function showBorderColorMenu() {
  document.all.borderColorMenu.style.display = "block";
}


/* ---------------------------------------------------------------------- *\
  Function    : previewBorderColor()
  Description : When mousing over a border color display the color in the 
	              preview square.
\* ---------------------------------------------------------------------- */
function previewBorderColor(color) {
  document.all.borderColorPreview.style.backgroundColor = color;  
}


/* ---------------------------------------------------------------------- *\
  Function    : selectBorderColor()
  Description : Assigns the selected border color to 
	              <input type="hidden" id="borderColor">.
\* ---------------------------------------------------------------------- */
function selectBorderColor(color) {
  document.all.borderColorPreview.style.backgroundColor = color;  
	document.all.borderColorMenu.style.display = "none";
	document.all['borderColor'].value = color;
}



/* ---------------------------------------------------------------------- *\
  Function    : showShadingColorMenu()
  Description : Show the shading color menu so user can select the table's 
	              shading color. 
\* ---------------------------------------------------------------------- */
function showShadingColorMenu() {
  document.all.shadingColorMenu.style.display = "block";
}



/* ---------------------------------------------------------------------- *\
  Function    : previewShadingColor()
  Description : When mousing over a shading color display the color in the 
	              preview square.