I have the following code and am trying to get the number entered by the user to create that amount of rows with a counter in the cells up to the number entered(ie. if user enters 6, 6 rows will appear with 1-6 in them, 1 at the top) I figure a for-loop would work well, but I can't figure out what variables work. Any help would be greatly appreciated!
$(document).ready(function() {
$('#nbrTxt').focus();
var index = 1;
$('input[name=nbrTxt]').on('keyup', function(e) {
if (e.which === 13) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html($(this).val());
$('table tr:last td:last').html(index);
$(this).focus().select();
index++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<title> JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>
Try this. I just changed keyup event to click though, but it should work.
$(document).ready(function() {
$('#nbrTxt').focus();
$('#btnGo').on('click', function(e) {
var value = $('#nbrTxt').val();
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(value);
$('table tr:last td:last').html(i);
}
});
});
Yes, you can use a for loop.
$(document).ready(function() {
$('#nbrTxt').focus();
$('input[name=nbrTxt]').on('keyup', function(e) {
var index = parseInt($(this).val());
if (e.which === 13) {
for(var i = 1; i <= index; i++) {
$('table').append('<tr><td>' + i + '</td><td></td></tr>');
$(this).focus().select();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<title> JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>
Related
I have this button to append a <Select> but the option should not be showing what is already in the table row (Math, English, Science) So I needed to only Show the PE SUBJECT in the <select> options, I tried doing the .each in JQuery but I cant compare the two. I'm trying to make my table dynamic.
This is my sample JSFiddle https://jsfiddle.net/ta73h4ez/16/
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<script>
$( document ).ready(function() {
$( "#add" ).click(function() {
$('tbody').append('<tr><td><select><option value="math">Math</option><option value="English">English</option><option value="Science">Science</option><option value="PE">PE</option></select></td><tr>');
});
});
</script>
<h2>HTML Table</h2>
<table>
<tbody>
<tr>
<th>Subject</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
<tr>
<td>Math</td>
<td>8am</td>
<td>9am</td>
</tr>
<tr>
<td>English</td>
<td>10am</td>
<td>1pm</td>
</tr>
<tr>
<td>Science</td>
<td>1pm</td>
<td>3pm</td>
</tr>
</tbody>
</table>
<input type="button" value = "Add Subject" id ="add">
</body>
</html>
you can compare like :
$('table').find('tr').each(function(){
var td1=$(this).find('td').eq(0).text();
$('select').find('option').each(function(){
var op = $(this).text();
if(op==td1)
{
$(this).hide();
}
});
});
This is my sample JSFiddle
jsFiddle
Change your javascript function to below. You can optimize this code according to your requirements.
$( document ).ready(function() {
$( "#add" ).click(function() {
var options = getOptions();
var optionsString = "";
for(var i = 0; i< options.length; i++){
optionsString += '<option value="'+options[i]+'">'+options[i]+'</option>';
}
$('tbody').append('<tr><td><select>'+optionsString +'</select></td><tr>');
});
var getOptions = function(){
var options = ["Math", "English", "Science", "PE"];
var allRows = $('table').find('tr');
for(var i=0; i< allRows.length && options.length>0; i++){
var subjectText = $(allRows[i]).find('td').eq(0).text();
var index = options.indexOf(subjectText);
options = options.splice(index, 1);
}
return options;
};
});
Here, the coding that I got from the Stack Overflow page. The window.location should go to next page by id, but I do not know how to code it.
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
}
This is my html code. Would you help me with this code?
<!DOCTYPE html>
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php", // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$('.employee-search-input').on('keyup click change', function() {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
});
});
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
</script>
<style>
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
</style>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I dont know which id you mean for redirecting. But I think you should change your addRowHandlers function to this. Obtain and use your mentioned id and use it after alert.
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
final code is
$(document).ready(function() {
var dataTable = $("#employee-grid").DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php" // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$(".employee-search-input").on("keyup click change", function() {
var i = $(this).attr("id"); // getting column index
var v = $(this).val(); // getting search input value
dataTable
.columns(i)
.search(v)
.draw();
});
});
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This code is for printing a table and it's working fine but the problem is that when I click on print table button it prints the table but when I clicked it again it again prints the same table below I want it to not work again until the new input values are given. once it should print table and then don't until new values are given. I also want it to be more responsive.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button id="again" onclick="myTable()">Print Table</button>
<br><br>
<button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>
<tr>
<button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>
<br><br>
<!-- <table class="table table-bordered table-striped table-hover" id="displayTables">
</table> -->
<table class="table" id="displayTables" border="0">
<tr></tr>
</table>
<!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>
</table> -->
<!-- <p id="MT"></p> -->
<script>
// function myFunction()
// {
// var text = "";
// var Number = document.getElementById("TN").value;
// var T;
// var I = document.getElementById("IN").value;
// var E = document.getElementById("EN").value;
// for (T = I; T <= E; T++) {
// text += Number + "*" + T + "=" + Number*T + "<br>";
// }
// document.getElementById("MT").innerHTML = text;
// }
// function generateTable()
// {
// //var myVar = prompt("A number?", "");
// var myVar = document.forms.multTables.x.value;
// var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
// for (i=1; i<=myVar; i++)
// {
// myString += "<tr><td>";
// myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
// myString += "</td></tr>";
// }
// document.getElementById('t').innerHTML = myString;
// return false;
// }
function myTable()
{
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp="";
for (T = I; T <= E; T++) {
temp+="<tr><td>"+Number+"</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number*T +"</td></tr>";
}
$("#displayTables").append(temp);
}
function Bordertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-bordered");
var change = document.getElementById("Bordertoggle");
if (change.innerHTML == "Add Alternate Row Style")
{
change.innerHTML = "Remove Alternate Row Style";
}
else {
change.innerHTML = "Add Alternate Row Style";
}
}
function Hovertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-hover");
var change = document.getElementById("Hovertoggle");
if (change.innerHTML == "Add Hover Effect")
{
change.innerHTML = "Remove Hover Effect";
}
else {
change.innerHTML = "Add Hover Effect";
}
}
</script>
</body>
</html>
Just save the current value in variable and when next time user clicks check if value matches then don't print otherwise print.
var prevN, prevI, prevE; //store value in this variable of previous state
function myTable() {
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp = "";
if (prevN !== Number || prevE !== E || prevI !== I) { //here check if value is changed or not
prevN = Number;
prevE = E;
prevI = I;
for (T = I; T <= E; T++) {
temp += "<tr><td>" + Number + "</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number * T + "</td></tr>";
}
$("#displayTables").append(temp);
}
}
function Bordertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-bordered");
var change = document.getElementById("Bordertoggle");
if (change.innerHTML == "Add Alternate Row Style") {
change.innerHTML = "Remove Alternate Row Style";
} else {
change.innerHTML = "Add Alternate Row Style";
}
}
function Hovertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-hover");
var change = document.getElementById("Hovertoggle");
if (change.innerHTML == "Add Hover Effect") {
change.innerHTML = "Remove Hover Effect";
} else {
change.innerHTML = "Add Hover Effect";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>MultiplicationTable</h2 <form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br> Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br> Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button id="again" onclick="myTable()">Print Table</button>
<br><br>
<button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>
<tr>
<button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>
<br><br>
<!-- <table class="table table-bordered table-striped table-hover" id="displayTables">
</table> -->
<table class="table" id="displayTables" border="0">
<tr></tr>
</table>
<!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>
</table> -->
<!-- <p id="MT"></p> -->
</body>
</html>
add a var to your ajavascript, like
printed = 0;
once you print your table, do
printed = 1;
Print only
if ( printed == 0 )
....print
?
Edit:
printed=0;
......
if(printed==0) {
$("#displayTables").append(temp);
printed=1;
}
Currently I'm working on a dynamic table where user can add and remove rows form the table to input data...how do I change my user's input 'name/id/class' on adding rows. Any help will be appreciated. Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic table</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js" integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
crossorigin="anonymous"></script>
<script>
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});
</script>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr>
<th class="small">S.No</th>
<th class="sizing"> Description</th><th>Quantity</th>
<th> Price </th>
<th><button id="butVal"> + </button></th>
</tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno">1</td>
<td> <input class="desc" type="text" name="desc"/> </td>
<td> <input class="qty" type="text" name="qty"/> </td>
<td> <input class="price" type="text" name="price"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So you have tried using ".addClass() Jquery function" or removeclass() function??
Heres an example of .addClass():
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
So, whenever a new entry is created, you need to change the class attribute of the input elements:
$('#butVal').click(function () {
var rowLen = $('tr.tabRow').length;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function (index, element) {
var className = $(element).attr("class"); // get the current class attribute of the element
$(element).attr("class", className + rowLen); // append the current row number to the class
$(element).val("");
});
}
});
Note: when you remove rows, the classes will not change. It could happen that you have the classes desc, then desc1, but then desc3.
I am trying to add a border to the header of the PDF document using css. But the border which I'm using in css is not taking to the pdf. Even for image also I'm using css only, it is taking, but for border it is not taking. Can you please help me to fix this border?
This is what I want http://imgset.net/WPHuNd
This is what I'm getting http://imgset.net/VWUM5z
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/ITPortal.css"/>
<link rel="stylesheet" type="text/css" href="css/oneHarmanMain.css"/>
<link rel="stylesheet" type="text/css" href="css/corev4.css"/>
<link rel="stylesheet" type="text/css" href="css/ITServiceCatalog.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/ITPortal.js"></script>
<script type="text/javascript" src="js/compatibility.js"></script>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/printContent.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/typearray.js"></script>
<link rel="stylesheet" href="css/print.css" type="text/css" />
<style>
#new-logo {
visibility: hidden;
width: 124px;
height: 66px;
}
#media print {
#new-logo {
visibility: visible;
width: 124px;
height: 66px;
}
input[type=text] {
border: 1px solid #ccc !important;
text-align: center !important;
}
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function update() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
}
</script>
<body>
<div id="mainContentWide">
<h2>WorkPlace Services</h2>
<h3 class="curveBoxWide">Description</h3>
<div id="new-logo"> <img src="image/back-logo.png" alt="Harman Logo"/></div>
<table id="mytab1">
<thead>
<tr class="thead item" id="Phead">
<th><span class="colm1">Desktop Software</span></th>
<th><span class="colm1">Quantity</span></th>
<th><span class="colm1">One time Price ($)</span</th>
<th><span class="colm1">Annual Price ($)</span</th>
<th><span class="colm1">One time Extended Cost ($)</span</th>
<th><span class="colm1">Annual Extended Cost ($)</span</th>
<th><span class="colm1">Sub-Total</span</th>
</tr>
</thead>
<tbody>
<tr class="item odd" class="test">
<td class="title"><p>Symantec SEP</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">136</td>
<td>6</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
<tr class="item">
<td class="title"><p>Citrix</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">368</td>
<td>85</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="title"><p>Total:</p></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td id="grandTotal"><input id="total" type="text" value="0" readonly/></td>
</tr>
</tfoot>
</table>
<!-- end #mainContent --></div>
<button onclick="javascript:demoFromHTML()" type="button" id="buttonPDF">Save as PDF</button>
<input type="button" value="Print" onclick="javascript:PrintElem('#mainContentWide')" style="margin: 0 20px; padding: 1px 30px" />
<p style="text-align: center; padding-top: 15px"> ('Save as PDF' is working on IE9 and above, chrome and Firefox browsers )</p>
</body>
</html>
This is my js file:
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data){
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function demoFromHTML() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
var pdf = new jsPDF('1', 'mm', [380, 350])
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
, source = $('#mainContentWide')[0]
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true
}
}
margins = {
top: 10,
bottom: 10,
left: 10,
width:1000,
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose){alert('dispose');
pdf.save('Software.pdf');
},
margins
)
document.getElementById("buttonPDF").disabled = 'true';
}
CSS File:
#media print {
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
#new-logo {
background-image: url("image/back-logo.png");
width: 124px;
height: 66px;
}
}
Try setting border-collapse: collapse; on the parent <table>. Per CSS 2.1 spec, rows cannot have borders unless this property is set. In most cases, the property default is border-collapse: separate; so it should just be a matter of overriding this.