📄 create_table.html

📁 javascript在线编辑器
💻 HTML
📖 第 1 页 / 共 4 页
字号:
12 3 4 下一页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>openWYSIWYG | Create Table</title>
</head>
<link rel="stylesheet" type="text/css" href="../styles/styles.css">
<script language="JavaScript" type="text/javascript">

var qsParm = new Array();

/* ---------------------------------------------------------------------- *\
  Function    : init()
  Description : Calls the initial functions when page loads.
\* ---------------------------------------------------------------------- */
function init() {
  retrieveWYSIWYG(); 
	hideOnBorderStyles(); 
	hideOnBorderWidths(); 
	hideColorMenus();
}



/* ---------------------------------------------------------------------- *\
  Function    : retrieveWYSIWYG()
  Description : Retrieves the textarea ID for which the table will be inserted into.
\* ---------------------------------------------------------------------- */
function retrieveWYSIWYG() {
  var query = window.location.search.substring(1);
  var parms = query.split('&');
  for (var i=0; i<parms.length; i++) {
    var pos = parms[i].indexOf('=');
    if (pos > 0) {
       var key = parms[i].substring(0,pos);
       var val = parms[i].substring(pos+1);
       qsParm[key] = val;
    }
  }
}



/* ---------------------------------------------------------------------- *\
  Function    : buildTable()
  Description : Builds a table and inserts it into the WYSIWYG.
\* ---------------------------------------------------------------------- */
function buildTable() {
  
	// Checks if the table border will use the BORDER-COLLAPSE CSS attribute
	var collapse;
	if (document.all.borderCollapse.checked == true) {
	  collapse = document.all.borderCollapse.value;
		}
	else {
	  collapse = "separate";
		}
	
	// Builds a table based on the data input into the form
  var table = '<table border="0" cellpadding="0" cellspacing="0" style="';
	table += 'BORDER-COLLAPSE: ' + collapse + ';';  
	table += ' border: ' + document.all.borderWidth.value + ' ' +  document.all.borderStyle.value + ' ' +  document.all.borderColor.value + ';';	
  table += ' width: ' + document.all.tableWidth.value + document.all.widthType.value + ';';
	table += ' background-color: ' + document.all.shadingColor.value + ';"';
  table += ' alignment="' + document.all.alignment.value + '">\n';	
	
	// Creates the number of rows and cols the table will have
	for (var i = 0; i < document.all.rows.value; i++) {
	  table += '<tr>\n';
		  for (var j = 0; j < document.all.cols.value; j++) {
		    table += '<td style="border: ' + document.all.borderWidth.value + ' ' +  document.all.borderStyle.value + ' ' +  document.all.borderColor.value + '; padding: ' + document.all.padding.value + ';">&nbsp;</td>\n';
		  }
		table += '</tr>\n';
  }
	
	table += '</table>\n';
	
	
	// Inserts the table code into the WYSIWYG editor	
	window.opener.insertHTML(table, qsParm['wysiwyg']);
  window.close();
}

/* ---------------------------------------------------------------------- *\
  Function    : hideOnBorderWidths()
  Description : Hides any table cell with an ID of "#px on" (e.g. "3px on").
\* ---------------------------------------------------------------------- */
function hideOnBorderWidths() {

  var onBorderWidths = new Array();
    onBorderWidths[0] = "1px on";
    onBorderWidths[1] = "2px on";
    onBorderWidths[2] = "3px on";
		onBorderWidths[3] = "4px on";
		onBorderWidths[4] = "5px on";
		onBorderWidths[5] = "6px on";
	
  for (var j = 0; j < onBorderWidths.length;) {
    document.getElementById(onBorderWidths[j]).style.display = 'none';
	  j++;
  }
}


/* ---------------------------------------------------------------------- *\
  Function    : showOffBorderWidths()
  Description : Shows all table cells with an ID of "#px" (e.g. "3px"). 
\* ---------------------------------------------------------------------- */
function showOffBorderWidths() {

  var offBorderWidths = new Array();
    offBorderWidths[0] = "1px";
    offBorderWidths[1] = "2px";
    offBorderWidths[2] = "3px";
		offBorderWidths[3] = "4px";
		offBorderWidths[4] = "5px";
		offBorderWidths[5] = "6px";
	
  for (var j = 0; j < offBorderWidths.length;) {
    document.getElementById(offBorderWidths[j]).style.display = 'block';
	  j++;
  }
}



/* ---------------------------------------------------------------------- *\
  Function    : selectWidth()
  Description : Selects the width to be used in the output table.
	Usage       : selectWidth("3px")
\* ---------------------------------------------------------------------- */
function selectWidth(id) {

  // Hide the currently selected width
  hideOnBorderWidths();
	
	// Show all of the width options as unselected
	showOffBorderWidths();
	
	// Hide the "off" element and replace with an "on" element so option appears selected
	document.getElementById(id).style.display = 'none';
12 3 4 下一页
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -