Home > Developer > JavaScript
In the past, we had to write a special effect for the client. We had to write JavaScript for a day or two, and then debug it for another day or two before we could see the clues. Now we only need to use JQuery and its plugin to implement the special effects in our minds, thanks to their authors for their contributions to humanity ..............).
I need to select a column from the list page to export to word, and then export the content of the selected column to word. In addition, to increase universality, the number of columns is not fixed. That is to say, this table may contain four or five columns. The number of columns to be selected is not fixed. For example, there is a table below, and we want to print columns other than salary.
Name |
Age |
Gender |
Salary |
| Zhang San | 19 | Male | 10000 |
| Zhang San | 19 | Male | 10000 |
| Zhang San | 19 | Male | 10000 |
My design is to first use the background code to loop through the table header to form the following string
1-Name -- 2-Age -- 3-Sex -- 4-Salary: store the string in hiddenfield and read it by JavaScript. In the pop-up Div, add the html corresponding to the checkbox,
In addition, EasyDrag jQuery Plugin is used to drag the pop-up page, which can be downloaded from http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin.
This plug-in is easy to use,
To achieve the drag effect.
Copy codeThe Code is as follows:
$ (Document). ready (function ()
{
$ ("# DivPanel"). easydrag ();
}
);
Html code
Copy codeThe Code is as follows:
<Div id = "divPanel" style = "width: 300px; height: 300px; background: white; border: 1px solid #000000; position: absolute; left: 5px; top: 50px ">
<Div id = "divTitle" style = "width: 100%; height: 25px; background: lavender">
Title
</Div>
<Div style = "width: 100%">
</Div>
</Div>
EasyDrag can also specify the area that can be dragged. For example, you can only drag the entire div by using the title. JS can write
Copy codeThe Code is as follows:
$ (Document). ready (function ()
{
$ ("# DivPanel"). easydrag ();
$ ("# DivPanel"). setHandler ("divTitle ");
}
);
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> New Web Project </title>
<Style type = "text/css">
. Pop-box {
Z-index: 9999;
Margin-bottom: 3px;
Display: none;
Position: absolute;
Background: # ffffff;
Border: solid 1px # 6e8bde;
}
. Pop-box h4 {
Color: # ffffff;
Cursor: default;
Height: 18px;
Font-size: 14px;
Font-weight: bold;
Text-align: left;
Padding-left: 8px;
Padding-top: 4px;
Padding-bottom: 2px;
}
. Pop-box-body {
Clear: both;
Margin: 4px;
Padding: 2px;
}
</Style>
<Script type = "text/javascript" src = "script/jquery. js">
</Script>
<Script type = "text/javascript" src = "script/jquery. easydrag. js"> </script>
<Script typ = "text/javascript">
$ (Document). ready (function (){
Var text = "1-Name -- 2-Age -- 3-Sex -- 4-Salary ";
Var tokenGroup = new Array ();
TokenGroup = text. split ("--");
$ (". OptionDiv"). append ("<fieldset class = 'fieldset1'> <legend class = 'legend1 '> Why? /Legend> </fieldset> ");
Var obj = new Object ();
For (obj in tokenGroup ){
// Alert (obj );
// Alert (Number (obj ));
Var index = Number (obj) + 1;
// Alert (index );
Var token = new Object ();
Token. value = tokenGroup [obj]. split ("-") [0];
Token. text = tokenGroup [obj]. split ("-") [1];
// Alert ("value:" + token. value + "text:" + token. text );
If (index = 1 ){
$ (". Legend1"). after ("<input id = 'checkbox" +
Index. toString () +
"'Value = '" +
Token. value +
"'Type = 'checkbox'/> <label for = 'checkbox" +
Index. toString () +
"'>" +
Token. text +
"</Label> <br> ");
}
Else {
$ (". Fieldset1"). append ("<input id = 'checkbox" +
Index. toString () +
"'Value = '" +
Token. value +
"'Type = 'checkbox'/> <label for = 'checkbox" +
Index. toString () +
"'>" +
Token. text +
"</Label> <br> ");
}
}
});
$ (Document). ready (function (){
$ (". BtnSelect"). click (function (){
Var select = "";
$ (". Fieldset1 input"). each (function (I ){
If (this. checked ){
If (select = "")
Select = (I + 1). toString () + "-" + $ (this). next (). text ();
Else
Select + = "--" + (I + 1). toString () + "-" + $ (this). next (). text ();
}
});
$ (". Selected"). val (select );
});
$ ("# BtnClose"). click (function (){
Var select = "";
$ (". Fieldset1 input"). each (function (I ){
If (this. checked ){
If (select = "")
Select = (I + 1). toString () + "-" + $ (this). next (). text ();
Else
Select + = "--" + (I + 1). toString () + "-" + $ (this). next (). text ();
}
});
$ (". Selected"). val (select );
});
});
$ (Document). ready (function (){
$ (". Pop-box"). easydrag ();
});
Function loadText (){
Var text = $ (". hiddenfield1"). val ();
Var tokenGroup = new Array ();
TokenGroup = text. split ("--");
$ (". Pop-box-body" ).html ("");
$ (". Pop-box-body "). append ("<fieldset class = 'fieldset1'> <legend class = 'legend1 '> Why? /Legend> </fieldset> ");
Var obj = new Object ();
For (obj in tokenGroup ){
// Alert (obj );
// Alert (Number (obj ));
Var index = Number (obj) + 1;
// Alert (index );
Var token = new Object ();
Token. value = tokenGroup [obj]. split ("-") [0];
Token. text = tokenGroup [obj]. split ("-") [1];
// Alert ("value:" + token. value + "text:" + token. text );
If (index = 1 ){
$ (". Legend1"). after ("<input id = 'checkbox" +
Index. toString () +
"'Value = '" +
Token. value +
"'Type = 'checkbox'/> <label for = 'checkbox" +
Index. toString () +
"'>" +
Token. text +
"</Label> <br> ");
}
Else {
$ (". Fieldset1"). append ("<input id = 'checkbox" +
Index. toString () +
"'Value = '" +
Token. value +
"'Type = 'checkbox'/> <label for = 'checkbox" +
Index. toString () +
"'>" +
Token. text +
"</Label> <br> ");
}
}
}
Function popupDiv (div_id ){
Var div_obj = $ ("#" + div_id );
Var too wwidth1_document.doc umentElement. clientWidth;
Var implements wheight?document.doc umentElement. clientHeight;
Var popupHeight = div_obj.height ();
Var popupWidth = div_obj.width ();
$ ("<Div id = 'mask'> </div>"). addClass ("mask"). width (required wwidth * 0.99)
. Height (optional wheight * 0.99). click (function (){
HideDiv (div_id );
}). AppendTo ("body"). fadeIn (200 );
Div_obj.css ({"position": "absolute "})
. Animate ({left: Drawing wwidth/2-popupWidth/2, top: Running wheight/2-popupHeight/2, opacity: "show"}, "show ");
LoadText ();
}
Function hideDiv (div_id ){
$ ("# Mask"). remove ();
$ ("#" + Div_id). animate ({left: 0, top: 0, opacity: "hide"}, "slow ");
}
</Script>
</Head>
<Body>
<H1> New Web Project Page <Input class = "hiddenfield1" type = "hidden" value = "1-Name -- 2-Age -- 3-Sex -- 4-Salary">
<Input type = "button" id = "btnPopup" name = "btnPopup" onclick = "popupDiv ('pop-div ')" class = "btnPopup" value = "PopupDiv">
<Div class = "pop-box" style = "width: 300px" id = "pop-div">
<H4> Title <Div class = "pop-box-body">
<P> </p>
</Div>
<Div class = "butonPanel" style = "text-align: right;">
<Input value = "Close" id = "btnClose" onclick = "hideDiv ('pop-div ');" type = "button">
</Div>
</Div>
<! -- <Div class = "optionDiv"> </div> -->
<Fieldset>
<Legend>
</Legend>
</Fieldset>
<Input type = "button" id = "button1" name = "button1" class = "btnSelect" value = "selected">
<Br>
<Textarea class = "selected" rows = "5" cols = "50">
</Textarea>
</Body>
</Html>
Source code download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
