Print with Javascript and CSS problem?

[writeman]

Hi all.
I have a button function to printe a dynamic generated page.
Code is below. But the css section in the code seems not work.
Could someone help me to debug it? Thanks.

function sheetprint(){
var aname = document.getElementById('name').value;
var asex = document.getElementById('sex').value;
str='';
str=str + '<style type="text/css" media="print"> ';
str=str + ' table td{ ';
str=str + ' border: 1px solid red; ';
str=str + ' } ';
str=str + '</style> ';
str=str + '<table> ';
str=str + ' <tr><td colspan="4">Company</td></tr>';
str=str + ' <tr><td colspan="4">Note</td></tr> ';
str=str + ' <tr> ';
str=str + ' <td>Name:</td> ';
str=str + ' <td>'+aname+'</td> ';
str=str + ' <td>Sex</td> ';
str=str + ' <td>'+asex+'</td> ';
str=str + ' </tr> ';
str=str + '</table> ';
document.body.innerHTML = str;
window.print();
window.history.go(0);
}

[mburt]

function sheetprint(){
var aname = document.getElementById('name').value;
var asex = document.getElementById('sex').value;
str="'';
str=str + '<style type="text/css" media="print"> ';
str=str + ' table td{ ';
str=str + ' border: 1px solid red; ';
str=str + ' } ';
str=str + '</style> ';
str=str + '<table> ';
str=str + ' <tr><td colspan="4">Company</td></tr>';
str=str + ' <tr><td colspan="4">Note</td></tr> ';
str=str + ' <tr> ';
str=str + ' <td>Name:</td> ';
str=str + ' <td>'+aname+'</td> ';
str=str + ' <td>Sex</td> ';
str=str + ' <td>'+asex+'</td> ';
str=str + ' </tr> ';
str=str + '</table> ';
document.body.innerHTML = str; ';
window.print();
window.history.go(0);
}

You only had one " in the variable. Makes it open, so you have to use "" to close it.

[writeman]

It seems have no matter with that. I wonder wheather I can use css in this way.

[mburt]

Did you use an event handler to call "sheetprint"?
Also, I cleaned up the code a bit, as it was invalid.

function sheetprint(){
var aname = document.getElementById('name').value;
var asex = document.getElementById('sex').value;
var str='';
str=str + '<style type="text/css" media="print"> ';
str=str + ' table td{ ';
str=str + ' border: 1px solid red; ';
str=str + ' } ';
str=str + '</style> ';
str=str + '<table> ';
str=str + ' <tr><td colspan="4">Company</td></tr>';
str=str + ' <tr><td colspan="4">Note</td></tr> ';
str=str + ' <tr> ';
str=str + ' <td>Name:</td> ';
str=str + ' <td>'+aname+'</td> ';
str=str + ' <td>Sex</td> ';
str=str + ' <td>'+asex+'</td> ';
str=str + ' </tr> ';
str=str + '</table> ';
document.body.innerHTML = str;
window.print();
window.history.go(0);
}

[writeman]

hi
I call the function this way.

<script type="text/javascript">
function sheetprint(){
var aname = 10;
var asex = '男';
var str='';
str=str + '<style type="text/css" media="print"> ';
str=str + ' table td{ ';
str=str + ' border: 1px solid red; ';
str=str + ' } ';
str=str + '</style> ';
str=str + '<table> ';
str=str + ' <tr><td colspan="4">Company</td></tr>';
str=str + ' <tr><td colspan="4">Note</td></tr> ';
str=str + ' <tr> ';
str=str + ' <td>Name:</td> ';
str=str + ' <td>'+aname+'</td> ';
str=str + ' <td>Sex</td> ';
str=str + ' <td>'+asex+'</td> ';
str=str + ' </tr> ';
str=str + '</table> ';
document.body.innerHTML = str;
window.print();
window.history.go(0);
}
</script>

<input type="button" onclick="javascript:sheetprint();" value="print a sheet">