我想通过选中复选框来显示我的桌子 [英] i want to diaplay my table with checkboxes checked

问题描述

我有一个drpdown，当我从ddl中选择一个项目时...带有更多复选框的表格正在显示数据，...我需要打印整个表格以及选中的复选框 .. .help me pls



这是我的ddl角色：

i have a drpdown,when i select an item from ddl...the table with more checkboxes is displaying data,...i need to print the whole table along with checked checkboxes ...help me pls

this is my ddl to delect roles:

<div class="form-group">
                                <label for="RoleMaster"><span class="colorred">*</span> Role Master</label>
<%--                                            <select class="form-control input-sm" name="CustomerGroup" title="Customer Group Name" id="CustomerGroup" required="true" >
                                </select>--%>
                                <input type="text" class="form-control input-sm" placeholder="Role" name="Role" id="txtRollCode" required="true" />
                                 <input type="hidden" id="RollcodeID" />
                                <select name="RollCode" id="ddlRollCode"  class="form-control input-sm">
                                    </select>
                            </div>

这是我的表格，显示数据：





< div class =row>

< div class =col-md-12 col-sm-12 >

< div class =box box-info>

< div class =box-header>

< h3 class =box-title>角色详细信息< / h3>

< / div>

< div class =box-body>

< div class =panel-groupid =accordionrole =tablistaria-multiselectable = true>

< div class =panel panel-default>

< div class =panel-headingrole =tabid = headingOne>

< h4 class =panel-title>

< a data-toggle =collapsedata-parent =＃accordion href =＃collapseOnearia-expanded =truearia-controls =collapseOne>

< img src =../../ Designing / images / Masters.png />&＃160;&＃160; Masters

< / a>

< / h4>

< ; / div>

< div id =collapseOneclass =panel-collapse collapserole =tabpanelaria-labelledby =headingOne>

< div class =panel-body>

< div class =table-section table-responsiveid =divMasters>

< / div>

< / div>

< / div>

< / div>

< div class =panel panel-default>

< div class =panel-headingrole =tabid =headingTwo>

< h4 class =panel-title>

< a class =collapseddata-toggle =collapsedata-parent =＃accordionhref =＃collapseTwoaria-expanded =falsearia-controls =collapseTwo>

< img src =../../ Designing / images / Transcations.png/>&＃160;&＃160;交易

< / a> ;

< / h4>

< / div>

< div id =collapseTwoclass =panel-collapse collapse role =tabpanelaria-labelledby =headingTwo>

< div class =panel-body>

< div class =table -section table-responsiveid =divTran sctions>

< / div>

< / div>

< / div>

< / div>

< div class =panel panel-default>

< div class =panel-headingrole =tab id =headingThree>

< h4 class =panel-title>

< a class =collapseddata-toggle =collapse data-parent =＃accordionhref =＃collapseThreearia-expanded =falsearia-controls =collapseThree>

< img src =../../ Designing / images / Accounts.jpg/>&＃160;&＃160; Accounts

< / a>

< / h4>

< / div>

< div id =collapseThreeclass =panel-collapse collapserole =tabpanelaria-labelledby =headingThree>

< div class =panel-body>

< div class =table-section table-responsiveid =divAccounts>

< / div>

< / div>

< / div>

< / div>



< div class =panel panel-default>

< div class =panel-headingrole =tabid =headingFour >

< h4 class =panel-title>

< a class =collapseddata-toggle =collapsedata-parent = #accordionhref =＃collapseFouraria-expanded =falsearia-controls =collapseFour>

< img src =../../ Designing / images / Reports.png/>&＃160;&＃160;报告

< / a>

< / h4>

< / div>

< div id =collapseFourclass =panel-collapse collapserole =tabpanelaria-labelledby =headingFour>

< div class =panel-body>

< div class =table-section table-responsiveid =divReports>

< / div>

< / div>

< / div>

< / div>



< div class =panel panel-default>

< div class =panel-headingrole =tabid =headingFive>

< h4 class =panel-title>

< a class =collapseddata-toggle =collapsedata-parent =＃accordionhref =＃collapseFivearia-expanded =falsearia-controls =collapseFive>

< img src =../../ Designing / images / InventoryReports.jpg/>&＃160;&＃160;库存报告

< / a>

< / h4>

< / div>

< div id =collapseFiveclass = panel-collapse collapserole =tabpanelaria-labelledby =headingFive>

< div class =panel-body>

< div class =table-section table-responsiveid =divInventoryReports>

< / div>

< / div>

< / div&g t;

< / div>



< div class =panel panel-default>

< div class =panel-headingrole =tabid =headingsix>

< h4 class =panel-title>

< a class =collapseddata-toggle =collapsedata-parent =＃accordionhref =＃collapseSixaria-expanded =falsearia-controls =collapseSix>

< img src =../../ Designing / images / AccountingReports.png/>&＃160;&＃160;会计报告

< / a>

< / h4>

< / div>

< div id =collapseSixclass =panel-崩溃崩溃role =tabpanelaria-labelledby =headingsix>

< div class =panel-body>

< div class = table-section table-responsiveid =divAccountingReports>

< / div>

< / div>

< ; / div>

< / div>



< div class =panel panel-default>

< div class =panel-标题role =标签id =headingseven>

< h4 class =panel-title>

< a class =collapsed data-toggle =collapsedata-parent =＃accordionhref =＃collapseSevenaria-expanded =falsearia-controls =collapseSeven>

< img src = ../../Designing/images/Tools.png/>&＃160;&＃160; Utilities&工具

< / a>

< / h4>

< / div>

< div id =collapseSevenclass =panel-collapse collapserole =tabpanelaria-labelledby =headingseven>

< div class =panel-body>

< div class =table-section table-responsiveid =divUtilitiesTools>

< / div>

< / div>

< / div>

< / div>



< / div>

< / div>

< / div>

< / div>

< / div> ;





我显示表格的jquery代码是



$（文件）.ready（function（）{



$（'＃BtnPrin'）。click（function（）{

var Masters = $（'＃divMasters'）。html（）;

var Transactions = $（'＃divTransctions'）。html（）;

var Accounts = $（'＃divAccounts'）。html（）;

var Reports = $（'＃divReports'）。html（）;

var Invreports = $（'＃divInventoryReports'）。html（）;

var Accreports = $（'＃divAccountingReports'）。html（）;

var utilities = $（'＃divUtilitiesTools'）。html（）;

var printWindow = window.open（''，''，'height = 800'，'width = 800'）;

printWindow.document.write（'< html>< head>< title> print contents< / title>'）;

printWindow.document.write（'< / head>< body>'）;

printWindow.document.write（'< / br>'）;

printWindow.document.write（'< h1 align =center> Masters< / h1>'）;

printWindow.document.write（Masters）;

printWindow.document.write（'< / br>'）;

printWindow.document.write（'< h1 align =center >交易< / h1>'）;

printWindow.document.write（Transactions）;

printWindow.document.write（'< / br>'）;

printWindow.document.write（'< h1 align =center> Accounts< / h1>'）;

printWindow.document.write（Accounts）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< ; / br>< / br>'）;

printWindow.document.write（'< h1 align =center> Reports< / h1>'）;

printWindow.document.write（Reports）;

printWindow.document.write（'< / br>'）;

printWindow.document.write（' < / br>'）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< / br>< / br>'）;

printWindow.document.write（'< h1 align =center>库存报告< / h1>'）;

printWindow.document.write（Invreports）

printWindow.document.write（'< / br>'）;

printWindow.document.write（'< h1 align =center>会计报告< / h1>'）;

printWindow.document.write（Accreports）;

printWindow.document.write（'< / br>'）;

printWindow.document.write（'< h1 align =center> Utilities&工具< / h1>'）;

printWindow.document.write（utilities）;

printWindow.document.write（'< / body>< / html> '）;

printWindow.document.close（）;

printWindow.print（）;

}）;

}）;









whwn我点击打印btn它只显示带有复选框的空表..其中一个被检查...空...需要显示表格，复选框

This is my tables which displays data:


<div class="row">
<div class="col-md-12 col-sm-12">
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">Roles Details</h3>
</div>
<div class="box-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<img src="../../Designing/images/Masters.png" />&#160;&#160;Masters
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="table-section table-responsive" id="divMasters">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<img src="../../Designing/images/Transcations.png" />&#160;&#160;Transactions
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="table-section table-responsive" id="divTransctions">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<img src="../../Designing/images/Accounts.jpg" />&#160;&#160;Accounts
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div class="table-section table-responsive" id="divAccounts">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<img src="../../Designing/images/Reports.png" />&#160;&#160;Reports
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div class="table-section table-responsive" id="divReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<img src="../../Designing/images/InventoryReports.jpg" />&#160;&#160;Inventory Reports
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<div class="table-section table-responsive" id="divInventoryReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingsix">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<img src="../../Designing/images/AccountingReports.png" />&#160;&#160;Accounting Reports
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix">
<div class="panel-body">
<div class="table-section table-responsive" id="divAccountingReports">
</div>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingseven">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<img src="../../Designing/images/Tools.png" />&#160;&#160;Utilities & Tools
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingseven">
<div class="panel-body">
<div class="table-section table-responsive" id="divUtilitiesTools">
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>


My jquery code to display tables is

$(document).ready(function () {

$('#BtnPrin').click(function () {
var Masters = $('#divMasters').html();
var Transactions = $('#divTransctions').html();
var Accounts = $('#divAccounts').html();
var Reports = $('#divReports').html();
var Invreports = $('#divInventoryReports').html();
var Accreports = $('#divAccountingReports').html();
var utilities = $('#divUtilitiesTools').html();
var printWindow = window.open('', '', 'height=800', 'width=800');
printWindow.document.write('<html><head><title>print contents</title>');
printWindow.document.write('</head><body>');
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Masters</h1>');
printWindow.document.write(Masters);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Transactions</h1>');
printWindow.document.write(Transactions);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Accounts</h1>');
printWindow.document.write(Accounts);
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('<h1 align="center">Reports</h1>');
printWindow.document.write(Reports);
printWindow.document.write('</br>');
printWindow.document.write('</br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('</br></br>');
printWindow.document.write('<h1 align="center">Inventory reports</h1>');
printWindow.document.write(Invreports)
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Accounting reports</h1>');
printWindow.document.write(Accreports);
printWindow.document.write('</br>');
printWindow.document.write('<h1 align="center">Utilities & tools</h1>');
printWindow.document.write(utilities);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
});




whwn i clicking print btn it just showing empty tables with checkboxes..none of them is checked...empty..need to display table with checked checkboxes

推荐答案

（文件）.ready（ function（）{

(document).ready(function () {

（'＃BtnPrin'）。click（function（）{

var Masters =

('#BtnPrin').click(function () {
var Masters =

（'＃divMasters'）。html（）;

var Transactions =

('#divMasters').html();
var Transactions =

这篇关于我想通过选中复选框来显示我的桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！