如何用ASP+JS开发自定义打印报表（添加、删除行列，合并、拆分单元格）？

1.html<script language="JavaScript">
var  nNameNumber=1;  /*新添加行的标号*/
var  nRowCount=0;    /*非空的行数*/
var  nRowAllCount=0;  /*总行数*/
var  strRowNumber;   /*添加数据时保存的行号，用来确认添加数据时的行号*/
var  nSumAge=0;      /*总年龄*/
function WinOpen()
{   
    strRowNumber=event.srcElement.id;
    strRowNumber=strRowNumber.substr(3,strRowNumber.length);
   // window.open ("user.htm","userinfo","width=350,top=300,left=300,height=220,resizable=yes,toolbar=no"); 
window.open ("user.htm","userinfo");
}function Age()
{   
    var nAge;  /*平均年龄*/
if (nRowCount==0)  
{  nAge=0;
}else{
       nAge=parseInt(nSumAge/nRowCount);
   }
 document.form1.t5.value=nAge;
}
/*
*功能：     
*   增加行，并将总行数+1 （包括空的行）
*
*返回值：      
*   true  -- 成功
*   false -- 错误
*==================================================================**/
function AddRow(){
    var i=nNameNumber;
var row = activeTable.insertRow(activeTable.rows.length);
    var col = row.insertCell(0);
col.innerHTML = '<input name="userid' + i + '"  id="userid' + i + '"  size="20" readOnly="true">';
col = row.insertCell(1); 
col.innerHTML = '<input name="username' + i + '"  id="username' + i + '"  size="20" readOnly="true">'; 
col = row.insertCell(2); 
col.innerHTML = '<input name="sex' + i + '"  id ="sex' + i + '"  size="8"   readOnly="true">'; 
col = row.insertCell(3); 
col.innerHTML = '<input name="age' + i + '"   id="age' + i + '"  size="8"  readOnly="true">';
col = row.insertCell(4); 
col.innerHTML = '<input type="button" onClick="WinOpen()" value="添加" name="add' + i + '"   id="add' + i + '"  > ';
col = row.insertCell(5);
    col.innerHTML = '<button onClick="DelRow()" name="dele' + i + '"   id="dele' + i + '">删除此行</button>';
nNameNumber=i+1;
++nRowAllCount;
}
/*
*功能：     
*   删除行，并将总行数-1 （包括空的行）
*
*返回值：      
*   true  -- 成功
*   false -- 错误
*==================================================================**/
function DelRow () {
var strSrcName = document.getElementsByTagName("button");
var strRowNumberTemp;
    var nRowIndex = 0; for ( i=0;i<strSrcName.length;i++){
if(strSrcName[i]==event.srcElement)
{
    nRowIndex=event.srcElement.parentElement.parentElement.rowIndex;
strRowNumberTemp=event.srcElement.id;
}
}
     
        strRowNumberTemp=strRowNumberTemp.substr(4,strRowNumberTemp.length);

var strTemp='if (document.form1.userid'+strRowNumberTemp+'.value!="") { nRowCount=nRowCount-1;nSumAge=nSumAge-document.form1.age'+strRowNumberTemp+'.value;}';
    
    eval(strTemp);
    
activeTable.deleteRow(nRowIndex);
--nRowAllCount;
} 
/*
*功能：     
*   提交前的确认
*
*返回值：      
*   true  -- 成功
*   false -- 错误
*==================================================================**/
function CheckData()
{  
if(nRowCount==0&&nRowAllCount==0)
{    alert("请先增加行，并输入！");
     return false;
}
if(nRowCount!=nRowAllCount&&nRowAllCount!=0)
{    alert("您未填满，请填满再提交！");
     return false;
}
 
}
</script><html><head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>
<!--
td           { font-size: 9pt }
-->
</style>
</head><body>
<form method="POST" action="check.htm" name="form1" id="form1" onSubmit="return CheckData()">
 
  <table id="activeTable" border="1" width="75%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" >
    <tr >
    <td width="26%" align="center" bgcolor="#E6E6E6" height="22" id="userid0" >用户ID</td>
    <td width="20%" align="center" bgcolor="#E6E6E6" height="22" id="username0">用户名</td>
    <td width="7%" align="center" bgcolor="#E6E6E6" height="22" id="sex0">性别</td>
    <td width="9%" align="center" bgcolor="#E6E6E6" height="22" id="age0">年龄</td>
    <td width="16%" align="center" bgcolor="#E6E6E6" height="22" id="add0">添加</td>
    <td width="22%" align="center" bgcolor="#E6E6E6" height="22" id="dele0">删除</td>
  </tr>
 
</table>

  <p><input type="button" value="增加一行" name="B3" onClick="AddRow()" ><input type="submit" value="提交" name="b1"><input type="button" value="平均年龄" name="b6" onClick="Age()">&nbsp;&nbsp;<input type="text"  id="t5" name="t5" size="7">岁</p>
</form>
</body></html>

解决方案 »

  1.   

    user.htm<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <script language="JavaScript">
    function MouseOver(Obj)
    {
    Obj.style.cursor = "hand";
    Obj.style.backgroundColor="#6487DC";
    Obj.style.color = "white";
    }
    function MouseOut(Obj)
    {
    Obj.style.backgroundColor="white";
    Obj.style.color ="black";
    }
    /*
    *功能：     
    *   点击table行时，在母窗口填数据，并算出总年龄和非空的行数值nRowCount加1
    *
    *输入参数：
    *   Obj - 点击行事件对象；
    *
    *返回值：      
    *   true  -- 成功
    *   false -- 错误
    *==================================================================**/
    function MouseClick(Obj)
    { 
        var i=window.opener.strRowNumber;
    var nAgeTemp=0;
    var nRowTemp=1;    /*1表示添加新数据 总行数+1*/
    var j=parseInt(window.opener.nSumAge);
    var strTemp='window.opener.document.form1.userid'+i+'.value!=""'  ; 

    if  (eval(strTemp))
    {     
         strTemp='nAgeTemp=parseInt(window.opener.document.form1.age'+i+'.value)';
     eval(strTemp);
     nRowTemp=0;    /*修改数据，总行数+0 */
    }      
         strTemp='window.opener.document.form1.userid'+i+'.value=Obj.cells[0].innerHTML;'
         eval(strTemp);
         strTemp='window.opener.document.form1.username'+i+'.value=Obj.cells[1].innerHTML;'
         eval(strTemp);
         strTemp='window.opener.document.form1.sex'+i+'.value=Obj.cells[2].innerHTML;'
         eval(strTemp);
         strTemp='window.opener.document.form1.age'+i+'.value=Obj.cells[3].innerHTML;'
         eval(strTemp);
         strTemp=Obj.cells[3].innerHTML;
         j=j+parseInt(strTemp)-nAgeTemp;  /*如果是修改数据，总年龄=总年龄-原来的年龄+现在的年龄*/  
         window.opener.nSumAge=j;
     window.opener.nRowCount=window.opener.nRowCount+nRowTemp;  /*如果是修改数据，总年龄=总年龄-原来的年龄+现在的年龄*/
         window.close();
         
    }
    </script>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <STYLE type=text/css>
    .dis { display:none}
    body         { font-size: 10pt; font-family:Arial }
    table        { font-size: 10pt; font-family:Arial ;border-width:1pt;background-color:#DCE3FC; }
    </STYLE></head><body  bgcolor="#f8f8f8">
    <table border="1" cellpadding="0" cellspacing="0" width="300" align="center" >
    <tr  id="t1" >
        <td align="center"> 用户ID </td>
        <td align="center"> 用户名 </td>
    <td align="center"  class="dis"> 性别</td>
    <td align="center" class="dis">年龄</td>
    </tr>
    <tr  id="t2" onClick="MouseClick(this)" onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
        <td align="center"> 111111</td>
        <td align="center"> 222222 </td>
    <td align="center"  class="dis"> 男</td>
    <td align="center" class="dis">5</td>
    </tr>
    <tr  id="t3" onClick="MouseClick(this)" onMouseOver="MouseOver(this)"  onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
        <td align="center"> 333333</td>
        <td align="center"> 444444 </td>
    <td align="center"  class="dis"> 女</td>
    <td align="center" class="dis">15</td>
    </tr>
    <tr  id="t4" onClick="MouseClick(this)" onMouseOver="MouseOver(this)"  onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
        <td align="center"> 555555</td>
        <td align="center"> 666666 </td>
    <td align="center"  class="dis"> 女</td>
    <td align="center" class="dis">15</td>
    </tr>
    <tr  id="t5" onClick="MouseClick(this)" onMouseOver="MouseOver(this)"  onMouseOut="MouseOut(this)" bgcolor="#FFFFFF">
        <td align="center"> 777777</td>
        <td align="center"> 888888 </td>
    <td align="center"  class="dis"> 女</td>
    <td align="center" class="dis">15</td>
    </tr>
    </table></body>
    </html>
      

  2.   

    我手头有一个编辑器，有表格的功能，不知道和不合你的要求，
    http://ky99.xiloo.com/_test/rtfedit/savefromhtml.html
    要的话留个邮箱给我
      

  3.   

    to  ky99xing(kk) 谢谢  [email protected]
      

  4.   

    ky99xing(kk )谢谢，能给个就最好了！！！[email protected]
      

  5.   

    thanks
    [email protected]
      

  6.   

    <HTML>
    <HEAD>
    <link rel="stylesheet" type="text/css" href="en.css">
    </HEAD>
    <body onfocusout="SyncData('To')" onload="InitHTMLEditor()" onfocus="ChangeSelect()" leftMargin=0 topMargin=0 rightmargin=0 bottomMargin=0>
    <table cellspacing=0 cellpadding=0 style="width:100%;color:<%=session("color")%>;font-size:<%=session("size")%>">
    <tr class="content2">
    <td><input class=button type=button onclick="InsertTable()" value="插入表格"></td>
    <td>当前行:<input name=RowIndex size=5 maxlength=5 disabled>当前列:<input disabled name=ColIndex size=5 maxlength=5></td>
    <td><input class=button type=button name=btnAddRow onclick="InsertRow()" disabled value="新增行"></td>
    <td><input class=button type=button name=btnDelRow onclick="DeleteRow()" disabled value="删除行"></td>
    <td><input class=button type=button name=btnAddCol onclick="InsertCol()" disabled value="新增列"></td>
    <td><input class=button type=button name=btnDelCol onclick="DeleteCol()" disabled value="删除列"></td>
    </tr>
    <tr style="content2"><td colspan=6 style="border:1px gainsboro outset;;"><iframe frameborder=0 name="HTMLEditor" src="about:blank" height="100%" width="100%"></iframe></td></tr>
    </table>
    <script>
    var MaxRowIndex=0
    var MaxColIndex=0
    var oCurrentTable=null
    function InsertTable()
    {
    HTMLEditor.focus();
    sHTMLTable="<TABLE><TR><TD></TD><TD></TD></TR><TR><TD></TD><TD></TD></TR></TABLE>"
    if(HTMLEditor.document.selection.type!="Control")
    {
    HTMLEditor.document.selection.createRange().pasteHTML(sHTMLTable)
    HTMLEditor.focus();
    }
    else
    {
    alert("当前位置不能插入表格!")
    }
    }
    function ChangeSelect()
    {
    btnAddRow.disabled=true;
    btnAddCol.disabled=true;
    btnDelRow.disabled=true;
    btnDelCol.disabled=true;
    RowIndex.disabled=true;
    ColIndex.disabled=true;
    if(HTMLEditor.document.selection.createRange().length>0)
    {
    if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
    {
    oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
    }
    }
    if(oCurrentTable!=null)
    {
    if(oCurrentTable.rows.length>0)
    {
    MaxRowIndex=oCurrentTable.rows.length;
    MaxColIndex=oCurrentTable.rows[0].cells.length;
    btnAddRow.disabled=false;
    btnAddCol.disabled=false;
    btnDelRow.disabled=false;
    btnDelCol.disabled=false;
    RowIndex.disabled=false;
    RowIndex.value=MaxRowIndex;
    ColIndex.disabled=false;
    ColIndex.value=MaxColIndex;
    }
    else
    {
    oCurrentTable=null;
    }
    }
    }
    function InsertRow()
    {
    if(HTMLEditor.document.selection.createRange().length>0)
    {
    if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
    {
    oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
    }
    }
    if(oCurrentTable!=null)
    {
    var oNewRow=oCurrentTable.insertRow();
    for(var i=0;i<oCurrentTable.rows[0].cells.length;i++)
    {
    oNewRow.insertCell();
    }
    }
    }
    function DeleteRow()
    {
    if(HTMLEditor.document.selection.createRange().length>0)
    {
    if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
    {
    oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
    }
    }
    if(oCurrentTable!=null)
    {
    if(parseInt(RowIndex.value)<=oCurrentTable.rows.length && oCurrentTable.rows.length>1)
    {
    oCurrentTable.deleteRow(parseInt(RowIndex.value)-1);
    MaxRowIndex=oCurrentTable.rows.length;
    RowIndex.value=MaxRowIndex;
    }
    else if(oCurrentTable.rows.length==1 && confirm("当前表格只有一行,删除当前行将同时删除整个表格,是否继续?"))
    {
    oCurrentTable.removeNode(true)
    oCurrentTable=null
    }
    else
    {
    alert("您没有选定表格或当前表格没有这么多行!")
    }
    }
    }
    function InsertCol()
    {
    if(HTMLEditor.document.selection.createRange().length>0)
    {
    if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
    {
    oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
    }
    }
    if(oCurrentTable!=null)
    {
    for(var i=0;i<oCurrentTable.rows.length;i++)
    {
    oCurrentTable.rows[i].insertCell();
    }
    }
    }
      

  7.   

    function DeleteCol()
    {
    if(HTMLEditor.document.selection.createRange().length>0)
    {
    if(HTMLEditor.document.selection.createRange().item(0).tagName=="TABLE")
    {
    oCurrentTable=HTMLEditor.document.selection.createRange().item(0)
    }
    }
    if(oCurrentTable!=null)
    {
    if(parseInt(ColIndex.value)<=oCurrentTable.rows[0].cells.length && oCurrentTable.rows[0].cells.length>1)
    {
    for(var i=0;i<oCurrentTable.rows.length;i++)
    {
    oCurrentTable.rows[i].deleteCell(parseInt(ColIndex.value)-1);
    }
    MaxColIndex=oCurrentTable.rows[0].cells.length;
    ColIndex.value=MaxColIndex;
    }
    else if(oCurrentTable.rows[0].cells.length==1 && confirm("当前表格只有一列,删除当前列将同时删除整个表格,是否继续?"))
    {
    oCurrentTable.removeNode(true)
    oCurrentTable=null;
    }
    else
    {
    alert("您没有选定表格或当前表格没有这么多列!")
    }
    }
    }
    function SyncData(sMethod)
    {
    if(oDateField!=null)
    {
    if(sMethod=="From")
    {
    InitEditorBody(oDateField.value);
    }
    else if(sMethod=="To")
    {
    var sValue=""
    var oHTMLNodes=HTMLEditor.document.all.tags("PRE")[0].childNodes
    for(i=0;i<oHTMLNodes.length;i++)
    {
    if(oHTMLNodes[i].nodeType==1)
    {
    alert("element")
    tempValue=oHTMLNodes[i].outerHTML.replace(/<TBODY>/igm,"")
    tempValue=tempValue.replace(/<\/TBODY>/igm,"")
    tempValue=tempValue.replace(/<BR>/igm,"\n")
    tempValue=tempValue.replace(/<P>/igm,"")
    tempValue=tempValue.replace(/<\/P>/igm,"\n")
    sValue=sValue + tempValue;
    }
    else
    {
    alert("text")
    sValue=sValue + oHTMLNodes[i].nodeValue;
    }
    }
    oDateField.value=sValue.replace(/\xa0/,"");
    }
    }
    }
    function InitEditorBody(sHTML)
    {
    sHTMLBody="<PRE>" + sHTML + "</PRE>"
    HTMLEditor.document.write("<HTML>\n");
    HTMLEditor.document.write("<HEAD>\n");
    HTMLEditor.document.write("<STYLE type='text/css'>\n");
    HTMLEditor.document.write("BODY\n")
    HTMLEditor.document.write("{\n")
    HTMLEditor.document.write(" FONT-SIZE:12px;\n")
    HTMLEditor.document.write(" BACKGROUND-COLOR:#f4f8ff;\n")
    HTMLEditor.document.write(" SCROLLBAR-FACE-COLOR:#e2edfe;\n")
    HTMLEditor.document.write(" SCROLLBAR-HIGHLIGHT-COLOR:#115781;\n")
    HTMLEditor.document.write(" SCROLLBAR-SHADOW-COLOR:#115781;\n")
    HTMLEditor.document.write(" SCROLLBAR-3DLIGHT-COLOR:#e2edfe;\n")
    HTMLEditor.document.write(" SCROLLBAR-ARROW-COLOR:#115781;\n")
    HTMLEditor.document.write(" SCROLLBAR-TRACK-COLOR:#e2edfe;\n")
    HTMLEditor.document.write(" SCROLLBAR-DARKSHADOW-COLOR:#e2edfe\n")
    HTMLEditor.document.write("}\n")
    HTMLEditor.document.write("TABLE\n")
    HTMLEditor.document.write("{\n")
    HTMLEditor.document.write(" BORDER-COLLAPSE:collapse;\n")
    HTMLEditor.document.write(" WIDTH:500px;\n")
    HTMLEditor.document.write(" BORDER:1px solid #000000;\n")
    HTMLEditor.document.write(" BORDER-WIDTH:1 0 0 1;\n")
    HTMLEditor.document.write("}\n")
    HTMLEditor.document.write("TD\n")
    HTMLEditor.document.write("{\n")
    HTMLEditor.document.write(" BORDER:1px solid #000000;\n")
    HTMLEditor.document.write(" BORDER-WIDTH:0 1 1 0;\n")
    HTMLEditor.document.write("}\n")
    HTMLEditor.document.write("</STYLE>\n")
    HTMLEditor.document.write("<SCRIPT>\n")
    HTMLEditor.document.write(ChangeSelect.toString() + ";\n")
    HTMLEditor.document.write("</" + "SCRIPT>\n")
    HTMLEditor.document.write("</HEAD>\n")
    HTMLEditor.document.write("<BODY leftMargin=2 topMargin=2 height='100%'>\n")
    HTMLEditor.document.write(sHTMLBody)
    HTMLEditor.document.write("</BODY>\n")
    HTMLEditor.document.write("</HTML>")
    }
    var sFrameName=window.name;
    var oDateField=null;
    var sFrameName=sFrameName.substr(0,sFrameName.length-5);
    function InitHTMLEditor()
    {
    if(window.frameElement!=null)
    {
    window.frameElement.scrolling="no";
    window.frameElement.height=document.body.scrollHeight;
    window.frameElement.width=document.body.scrollWidth;
    window.frameElement.marginWidth=0;
    window.frameElement.marginWidth=0;
    window.frameElement.frameSpacing=0;
    window.frameElement.frameBorder=0;
    oDateField=window.frameElement.parentNode.all(sFrameName);
    oDateField.attachEvent("onchange",new Function("SyncData('From')"))
    }
    if(oDateField!=null) { sHTMLBody=oDateField.value }
    InitEditorBody(sHTMLBody);
    HTMLEditor.document.designMode='on'
    HTMLEditor.document.onselectionchange=new Function("ChangeSelect()")
    }
    </script>
    </body>
    </html>
      

  8.   

    to yonghengdizhen(我用青春换面包) :
       很感谢你的参与，你提供的代码好像不完全，无法正常运行起来看到效果。希望你能重新提供
      

  9.   

    to dawn06():
       我看了你提供的那个地址：
    http://ky99.xiloo.com/_test/rtfedit/savefromhtml.html
    基本上很不错，但是合并单元格操作起来不是很方便，可以给我发一份吗？[email protected]
    在ASP论坛里我也发表了一份同名的文章，你也可以去得分。
      

  10.   

    下面就是上述代码引用的xsl文件片段 <tr class="content">
    <td colspan="6" valign="top">
    <xsl:value-of select="root/record/JYSJ/@ChName" />
    <xsl:value-of select="root/record/JYSJ/@star" />(限2000汉字)<br/>
    <textarea class="scrollbar1" name="txtJYSJ" style="width:98%;display:non" rows="10" >
    <xsl:attribute name="onchange">return limitlen(this.value,5000,'检验所见过长')</xsl:attribute>
    <xsl:value-of select="root/record/JYSJ" />
    </textarea>
    <iframe name="txtJYSJ_HTML" frameBorder="0" SCROLLING="NO" src="../inc/HTMLEditor.asp" width="98%"></iframe>
    </td>
    </tr>
    <tr class="content">
    <td colspan="6" valign="top">
    分析依据(限2000汉字)
    <xsl:value-of select="root/record/JLZYYJ/@star" /><br/>
    <textarea class="scrollbar1" name="txtJLZYYJ" style="width:98%;display:none" rows="0" >
    <xsl:attribute name="onchange">return limitlen(this.value,2000,'分析依据过长')</xsl:attribute>
    <xsl:value-of select="root/record/JLZYYJ" />
    </textarea>
    <iframe name="txtJLZYYJ_HTML" SCROLLING="NO" frameBorder="0" src="../inc/HTMLEditor.asp" width="98%"></iframe>
    </td>
    </tr>
    <tr class="content">
    <td colspan="6" valign="top">
    检验结论(限2000汉字)
    <xsl:value-of select="root/record/JYJL/@star" /><br/>
    <textarea class="scrollbar1" name="txtJYJL" style="width:98%;display:none" rows="0" >
    <xsl:attribute name="onchange">return limitlen(this.value,2000,'检验结论过长')</xsl:attribute>
    <xsl:value-of select="root/record/JYJL" />
    </textarea>
    <iframe name="txtJYJL_HTML" SCROLLING="NO" frameBorder="0" src="../inc/HTMLEditor.asp" width="98%"></iframe>
    </td>
    </tr>
      

  11.   

    to  ky99xing(kk) :
    在行单元格，列单元格的合并方面，如果能进一步改进（尤其是垂直方向列单元格合并）。
    怎么让行、列的宽度，高度支持鼠标拖放？还有我发现当定义好一个表格后，一在单元格里录入数据的时候，整个列宽都发生了变化，反应太敏感，不太适合自定义报表，要是能做出frontpage里编辑table的效果就好了，你能给指点一下，进一步完善吗？谢谢。那边的分已给你了。
    还有一个问题是关于票据套打的，我认为应用css控制显示/不显示 边线，你有没有这方面的例子？
      

  12.   

    to ： yonghengdizhen(卖CSDN门票的小贩) :我还是没有搞懂。你能否一次给出完整可以运行看到效果的代码？包括你的en.css文件。可以给我发一份吗？
    [email protected]