📄 table.html
字号:
window.tab3.innerHTML = "<b><u>编辑单元格</u></b>"
}
</script>
<STYLE>
td
{
font-size: 9pt;
font-family: 宋体;
color:black;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px none #999999;
border-left: 1px solid #999999;
}
p
{
font-size: 9pt;
font-family:宋体;
}
input {
font-family: "宋体";
font-size: 9pt;
color: #0066CC;
background-color: #CCCCCC;
height: 20px;
border-top: 1px solid #bebebe;
border-right: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
border-left: 1px solid #bebebe;
}
select
{
font-size:9pt;
border-left: 1px solid #bebebe;
border-right: 1px solid #bebebe;
border-top: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
height: 22px;
font-family: "宋体";
color: #0066CC;
}
</STYLE>
<body onload="checkTable()" bgcolor=#CCCCCC leftmargin=0 topmargin=0 >
<table width="100%">
<tr>
<td ID="tab1"></td>
<td ID="tab2"></td>
<td ID="tab3"></td>
</tr>
</table>
<span ID="divNewTable">
<form id="NewTable">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="24"> 行数：</td>
<td> <input type="text" ID="Rows" style="Width:50px;" value="2"> </td>
<td> 列数：</td>
<td> <input type="text" ID="Columns" style="Width:50px;" value="2"> </td>
</tr>
<tr>
<td height="24"> 单元格填充：</td>
<td> <input type="text" ID="Cellpadding" style="Width:50px;" value="0">
</td>
<td> 单元格间距：</td>
<td> <input type="text" ID="Cellspacing" style="Width:50px;" value="0">
</td>
</tr>
<tr>
<td height="24"> 表格宽：</td>
<td nowrap> <input type="text" ID="Width" style="Width:50px;"> <select ID="WidthUnit">
<option value="%">Percent </option>
<option selected>Pixels </option>
</select> </td>
<td> 表格高：</td>
<td nowrap> <input type="text" ID="Height" style="Width:50px;"> <select ID="HeightUnit">
<option value="%"> Percent
<option selected> Pixels </select> </td>
</tr>
<tr>
<td height="24" nowrap> 边框宽：</td>
<td> <input type="text" ID="Border" style="Width:50px;" Value="1"> </td>
<td> 边框颜色：</td>
<td> <input type="text" ID="BorderColor" style="Width:100px;"> </td>
</tr>
<tr>
<td height="24" colspan="4" align="center">
<input type="Button" value="创建表格" OnClick="TableInsert()">
</td>
</tr>
</table>
</form>
</span> <span ID="divEditTable">
<form id="EditTable">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="24"> 表格宽：</td>
<td nowrap>
<input type="text" ID="Width" style="Width:50px;"> <select ID="WidthUnit">
<option value="%"> Percent
<option value="px" selected> Pixels </select> </td>
<td> 表格高：</td>
<td nowrap>
<input type="text" ID="Height" style="Width:50px;"> <select ID="HeightUnit">
<option value="%"> Percent
<option value="px" selected> Pixels </select> </td>
</tr>
<tr>
<td height="24" nowrap> 边框宽：</td>
<td>
<input type="text" ID="Border" style="Width:50px;"> </td>
<td> 边框颜色：</td>
<td>
<input type="text" ID="BorderColor" style="Width:100px;"> </td>
</tr>
<tr>
<td height="24"> 单元格填充：</td>
<td>
<input type="text" ID="Cellpadding" style="Width:50px;"> </td>
<td> 单元格间距：</td>
<td>
<input type="text" ID="Cellspacing" style="Width:50px;"> </td>
</tr>
<tr>
<td height="24" colspan="4" align="center">
<input type="Button" value="修改表格" OnClick="TableUpdate();">
</td>
</tr>
</table>
</form>
</span> <span ID="divEditCell">
<form ID="EditCell">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="24"> 行宽：</td>
<td nowrap> <input type="text" ID="Width" style="Width:50px;"> <select ID="WidthUnit">
<option value="%"> Percent
<option value="px" selected> Pixels </select> </td>
<td> 行高：</td>
<td nowrap> <input type="text" ID="Height" style="Width:50px;"> <select ID="HeightUnit">
<option value="%"> Percent
<option value="px" selected> Pixels </select> </td>
</tr>
<tr>
<td height="24"> 对齐方式：</td>
<td nowrap> <select ID="Align">
<option value="left"> Left
<option value="center" selected> center
<option value="right"> Right
</select> </td>
<td nowrap> 垂直对齐：</td>
<td nowrap> <select ID="Valign">
<option value="top">Top </option>
<option value="middle" selected>Middle </option>
<option value="bottom">Bottom </option>
</select> </td>
</tr>
<tr>
<td height="24" nowrap> 背景颜色：</td>
<td> <input type="text" ID="BgColor" style="Width:100px;"> </td>
<td> 文本绕排：</td>
<td> <input type="checkbox" ID="WrapText"> </td>
</tr>
<td height="24" colspan="4" align="center">
<input type="Button" value="修改表格" OnClick="UpdateCell();">
</td>
</table>
</form>
</span>
<SCRIPT language="javascript">
function GetElement(oElement,sMatchTag)
{
while (oElement!=null && oElement.tagName!=sMatchTag)
{
if(oElement.id=="HTMLEditor") return null;
oElement = oElement.parentElement
}
return oElement
}
function checkTable()
{
//alert (window.opener.HTMLEditor.InnerHTML);
var oSel = window.opener.HTMLEditor.document.selection.createRange()
var sType = window.opener.HTMLEditor.document.selection.type
var SelTable
if (!oSel.item) { // See if it is a table cell
if(oSel.parentElement != null)
{//Get existing cell properties
var oTD = GetElement(oSel.parentElement(),"TD");
if(oTD != null)
{
var st3 = oTD.width //HTML : width
if(st3.indexOf("%")!=-1)
{
EditCell.Width.value = st3.substring(0,st3.indexOf("%"))
EditCell.WidthUnit.value = "%"
}
else
{
EditCell.Width.value = oTD.width
EditCell.WidthUnit.value = "px"
}
var st4 = oTD.height //HTML : height
if(st4.indexOf("%")!=-1)
{
EditCell.Height.value = st4.substring(0,st4.indexOf("%"))
EditCell.HeightUnit.value = "%"
}
else
{
EditCell.Height.value = oTD.height
EditCell.HeightUnit.value = "px"
}
EditCell.Align.value = oTD.align //HTML : align
EditCell.Valign.value = oTD.vAlign //HTML : vAlign
EditCell.BgColor.value = (oTD.bgColor).substring(1)
EditCell.WrapText.checked = !oTD.noWrap;
}
}
SelTable = GetElement(oSel.parentElement(), "TABLE");
TabEditTable();
} else if ((oSel.item) && (oSel.item(0).tagName=="TABLE")) {
SelTable = oSel.item(0);
TabEditTable();
EnableEditTableOnly();
}
if (SelTable != null && SelTable.tagName=="TABLE")
{
tableWidth = SelTable.width.toString();
if (tableWidth.indexOf("%") > 0) {
EditTable.Width.value = tableWidth.replace("%", "");
} else {
EditTable.Width.value = SelTable.width;
EditTable.WidthUnit.value = "px";
}
tableHeight = SelTable.height.toString();
if (tableHeight.indexOf("%") > 0) {
EditTable.Height.value = tableHeight.replace("%", "");
} else {
EditTable.Height.value = SelTable.height;
EditTable.HeightUnit.value = "px";
}
EditTable.Border.value = SelTable.border
EditTable.BorderColor.value = SelTable.borderColor
EditTable.Cellpadding.value = SelTable.cellPadding;
EditTable.Cellspacing.value = SelTable.cellSpacing;
document.all.divNewTable.style.display="none";
}
else
{
TabInsertTable();
DisableEditTable();
document.all.divEditTable.style.display="none";
}
}
</SCRIPT>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -