0byt3m1n1

Path: /data/17/1/18/11/1670011/user/1801231/htdocs/marketting/js/scripts/ [ Home ]
File: table_insert.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=window.opener.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/table_insert.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
var oTU=new TableUtilities();

function TableUtilities()
  {
  this.oTD;
  }

function GetElement(oElement,sMatchTag)
  {
  while (oElement!=null&&oElement.tagName!=sMatchTag)
    {
    if(oElement.tagName=="BODY")return null;
    oElement=oElement.parentElement;
    }
  return oElement;
  }

function tableClick(oTD)
  {
  oTable=GetElement(oTD,"TABLE")
  if(oTD.tagName!="TD")return;

  for(var i=0;i<oTable.rows.length;i++)
    {
    oCurrTR=oTable.rows(i)
    for(var j=0;j<oCurrTR.cells.length;j++)
      {
      oCurrTD=oCurrTR.cells(j)
      oCurrTD.style.backgroundColor="white";
      }
    }
  oTD.style.backgroundColor="#fac606";
  oTU.oTD=oTD;
  }

function colSpan()
  {
  if(oTU.oTD==null)return;
  var oTD = oTU.oTD
  var oTable=GetElement(oTD,"TABLE")

  if(oTD.nextSibling!=null)
    {
    numOfSpan=oTD.nextSibling.colSpan
    oTable.rows[oTD.parentElement.rowIndex].deleteCell(oTD.nextSibling.cellIndex);

    oTD.colSpan=oTD.colSpan+numOfSpan;
    }
  }

function rowSpan()
  {
  if(oTU.oTD==null)return;
  var oTD = oTU.oTD
  var oTable=GetElement(oTD,"TABLE")

  selectedRow=oTD.innerText.split(",")[0]*1//asumsi:displayed=actual
  selectedCol=oTD.innerText.split(",")[1]*1

  isFinish=false
  for(var k=1;k<oTable.rows.length-(selectedRow);k++)
    {
    var isExist=false;
    for(var i=0;i<oTable.rows(selectedRow+k).childNodes.length;i++)
      {
      if(oTable.rows(selectedRow+k).childNodes(i).innerText.split(",")[1]*1==selectedCol)
        {
        nActualToDelete=i
        isExist=true
        }
      }
    if(isExist)
      {
      if(!isFinish)
        {
        oTD.rowSpan+=oTable.rows(selectedRow+k).childNodes(nActualToDelete).rowSpan
        oTable.rows(selectedRow+k).deleteCell(nActualToDelete)
        isFinish=true
        }
      }
    }
  }

function doPreview()
  {
  if(inpCollapse.value=="Yes")
    sTmp="BORDER-COLLAPSE: collapse"
  else
    sTmp="";

  var sCellSpacing="";
  if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;

  var sCellPadding="";
  if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value;

  sHTML="<table id=idTable style='"+sTmp+";background-color:white' "+sCellSpacing+" "+sCellPadding+" width=100% height=100%>"

  for(var i=0;i<inpRows.value;i++)
    {
    sHTML+="<tr>"
    for(var j=0;j<inpCols.value;j++)
      {
      if(inpBorder.value==0)
        sHTML+="<td style='border:black 1px dotted;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
      else
        sHTML+="<td style='border:black " + inpBorder.value + "px solid;padding:1px;cursor:default;' align=center onclick='tableClick(this)'>" + i + "," + j + "</td>";
      }
    sHTML+="</tr>"
    }
  sHTML+="</table>"
  idPreview.innerHTML=sHTML
  }

function doPreview2()
  {
  var oTable=idPreview.document.all.idTable

  if(inpCollapse.value=="Yes")
    oTable.style.borderCollapse="collapse";
  else
    oTable.style.borderCollapse="";
  oTable.cellSpacing=inpSpacing.value;

  oTable.cellPadding=inpPadding.value;

  for(var i=0;i<oTable.rows.length;i++)
    {
    oCurrTR=oTable.rows(i)
    for(var j=0;j<oCurrTR.cells.length;j++)
      {
      oCurrTD=oCurrTR.cells(j)
      if(inpBorder.value==0)
        oCurrTD.style.border="black 1px dotted";
      else
        oCurrTD.style.border="black " + inpBorder.value + "px solid";
      }
    }
  }

function doInsert()
  {
  if(!window.opener.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=window.opener.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  window.opener.oUtil.obj.saveForUndo();

  var oNodes=idPreview.childNodes(0).childNodes(0).childNodes

  if(inpCollapse.value=="Yes")
    sTmp="BORDER-COLLAPSE: collapse"
  else
    sTmp="";

  var sCellSpacing="";
  if(inpSpacing.value!="")sCellSpacing="cellspacing="+inpSpacing.value;

  var sCellPadding="";
  if(inpPadding.value!="")sCellPadding="cellpadding="+inpPadding.value;

  sHTML="<table style='"+sTmp+";width:100%;' "+sCellSpacing+" "+sCellPadding+ (inpSummary.value==""?"":" summary=\"" + inpSummary.value + "\" ") + " selThis=\"selThis\">" //BORDER-COLLAPSE:collapse; cellpadding=0 cellspacing=0
  if(inpCaption.value!="") sHTML+="<caption>"+inpCaption.value+"</caption>";
  for(var i=0;i<oNodes.length;i++)
    {
    sHTML+="<tr>"
    for(var j=0;j<oNodes(i).childNodes.length;j++)
      {
      nRowSpan=oNodes(i).childNodes(j).rowSpan
      nColSpan=oNodes(i).childNodes(j).colSpan
      var sRowSpan=(nRowSpan>1 ? " rowspan="+nRowSpan+ " " : "");
      var sColSpan=(nColSpan>1 ? " colspan="+nColSpan+ " " : "");
      if(inpBorder.value==0)
        sHTML+="<td "+sRowSpan+sColSpan+" style='vertical-align:top'></td>";
      else
        sHTML+="<td style='border:black " + inpBorder.value + "px solid;vertical-align:top' "+sRowSpan+sColSpan+"></td>";
      }
    sHTML+="</tr>"
    }
  sHTML+="</table>"

  if(oSel.parentElement)
    oSel.pasteHTML(sHTML);
  else
    oSel.item(0).outerHTML = sHTML;

  for(var i=0;i<oEditor.document.all.length;i++)
    {
    if(oEditor.document.all[i].getAttribute("selThis")=="selThis")
      {
      oEditor.document.all[i].removeAttribute("selThis",0);
      var oSelRange = oEditor.document.body.createControlRange()
      oSelRange.add(oEditor.document.all[i]);
      oSelRange.select();
      }
    }

  //*** RUNTIME BORDERS ***
  window.opener.oUtil.obj.runtimeBorder(false);
  //***********************

  window.opener.realTime(window.opener.oUtil.oName);
  window.opener.oUtil.obj.selectElement(0);
  }
function bodyOnload()
  {
  btnInsert.focus();
  }
</script>
</head>
<body onload="bodyOnload();loadTxt();doPreview()" style="overflow:hidden;">
<!-- do not remove "filter" -->

<table width=100% height="100%" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:7;padding-left:10;padding-right:10">

<!---->
  <table style="margin-bottom:4">
  <tr>
    <td><span id=txtLang name=txtLang>Rows</span>:</td>
    <td><input type="text" ID="inpRows" NAME="inpRows" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
    <td>&nbsp;</td>
    <td><span id="txtLang" name=txtLang>Spacing</span>:</td>
    <td><select id="inpSpacing" name="inpSpacing" onchange="doPreview2()" class="inpSel">
        <option value="" selected></option>
        <option value=0>0px</option>
        <option value=1>1px</option>
        <option value=2>2px</option>
        <option value=3>3px</option>
        <option value=4>4px</option>
        <option value=5>5px</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><span id="txtLang" name=txtLang>Columns</span>:</td>
    <td><input type="text" id="inpCols" name="inpCols" size=3 value=2 onchange="doPreview()" class="inpTxt"></td>
    <td>&nbsp;</td>
    <td><span id="txtLang" name=txtLang>Padding</span>:</td>
    <td><select id="inpPadding" name="inpPadding" onchange="doPreview2()" class="inpSel">
        <option value="" selected></option>
        <option value=0>0px</option>
        <option value=1>1px</option>
        <option value=2>2px</option>
        <option value=3>3px</option>
        <option value=4>4px</option>
        <option value=5>5px</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><span id=txtLang name=txtLang>Borders</span>:</td>
    <td>
      <select ID="inpBorder" NAME="inpBorder" onchange="doPreview2()" class="inpSel">
        <option value=0 id="optLang" name="optLang" selected>No Border</option>
        <option value=1>1px</option>
        <option value=2>2px</option>
        <option value=3>3px</option>
        <option value=4>4px</option>
        <option value=5>5px</option>
      </select>
    </td>
    <td>-</td>
    <td><span id=txtLang name=txtLang>Collapse</span>:</td>
    <td>
      <select ID="inpCollapse" NAME="inpCollapse" onchange="doPreview2()" class="inpSel">
        <option value="Yes" id="optLang" name="optLang" selected>Yes</option>
        <option value="No" id="optLang" name="optLang">No</option>
      </select>
    </td>
<!---->
  </tr>
  <tr>
    <td><span id=txtLang name=txtLang>Caption</span>:</td>
    <td colspan='4'><input type="text" id="inpCaption" name="inpCaption" size="40" value=""></td>
  </tr>
  <tr>
    <td><span id=txtLang name=txtLang>Summary</span>:</td>
    <td colspan='4'><input type="text" id="inpSummary" name="inpSummary" size="40" value=""></td>
  </tr>
  </table>


  <table style="width:100%;height:140;" cellpadding=0 cellspacing=0 border=0>
  <tr>
    <td style="background-color:ghostWhite; padding:0; border:2 inset;" height=100%>
      <div id=idPreview style="overflow:auto;width:100%;height:100%;padding:10"></div>
    </td>
  </tr>
  <tr>
    <td align=center nowrap>
      <INPUT type="button" name="btnSpan2" id="btnSpan2" value="Span >" onclick="colSpan()" unselectable=on style="height:22;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
      <INPUT type="button" name="btnSpan1" id="btnSpan1" value="Span v" onclick="rowSpan()" unselectable=on style="height:22;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    </td>
  </tr>
  </table>


</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13;padding-top:7;padding-bottom:7;" align="right">
  <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  <input type="button" name=btnInsert id=btnInsert value="insert" onclick="doInsert();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>