Using below code i can able to print table, but i not able to print the value which i was entered. any one can help.....
Here is the code.....
<!doctype html>
<html>
<head>
<script>
function printDiv()
{
var divToPrint=document.getElementById('demo');
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
</script>
</head>
<body class="tundra">
<div>
<table id="demo" >
<tr>
<td><input type="text" ></td>
<td> cell 11 </td>
</tr>
<tr>
<td><input type="text" ></td>
<td> cell 12</td>
</tr>
</table>
</div>
<input type="button" value="Print" onclick="printDiv()" />
</body>
</html>
Demo Fiddle
You can replace all inputs with there value and then can print the table... Doing it completely using javascript is pretty difficult but not impossible.
jQuery
function printDiv() {
$('input[type=text]').each(function () {
var cell = $(this);
cell.replaceWith('<span>' + cell.val() + '</span>');
});
var divToPrint = document.getElementById('demo');
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
divToPrint=document.getElementById('demo');
Will take the DOM input elements in the same way they where loaded at first time.
For example, if your input has
value="test"
in your html code, then it will be showed in the print.
The issue here is not the table but the input elements. When the user enters data, it is stored in the value properties of input element nodes in the Document Object Model. But when you write the enclosing div element in another document, only the elements and their HTML attributes are written—the values are discarded.
The solution is to make the data part of the markup, by setting the value attribute according to the value property. For this, you can first clone the div element using the cloneNode method and then the getElementsByTagName method to get all input elements inside it. This means that you would replace the first statement inside the printDiv function by the following:
var divToPrint=document.getElementById('demo').cloneNode(true);
var inputs = divToPrint.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++)
inputs[i].setAttribute('value', inputs[i].value);
Related
I'm trying to copy a row, change some data, then append it to the end of a table:
$(document).ready(function(){
$("#show_new_rows_number").change(function(){
var table_body = $("tbody");
var master_row = table_body.clone().children('tr')[mr_selector];
master_row.children('td')[0].children('input').first().name = 'type['+(rows+1)+']';
master_row.children('td')[1].children('input').first().name = 'type['+(rows+1)+']';
});
});
Here's the HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th>First Name:</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first_name[1]"></td>
<td><input type="text" name="last_name[1]"></td>
</tr>
</tbody>
</table>
<input type="number" min=1 max=10 value=1 id="show_new_rows_number">
</body>
</html>
I'm getting an error that master_row.children is not a function. I really stink at traversing and doing anything in Javascript when it comes to DOM manipulation. Please help! I haven't even gotten to appending the row to the table yet and already getting errors.
The problem is that the elements returned from the jQuery's .children() method, are not jQuery elements, they are HTML elements, thus they do not have any .children() method.
So, assuming that the rest of the code is correct (since this seems to be just a part of the javascript code), your code should be:
$(document).ready(function(){
$("#show_new_rows_number").change(function(){
var table_body = $("tbody");
var master_row = table_body.clone().children('tr')[mr_selector];
$(master_row.children('td')[0]).children('input').first().name = 'type['+(rows+1)+']';
$(master_row.children('td')[1]).children('input').first().name = 'type['+(rows+1)+']';
});
});
O such cases, use the developer tools to print some values on the console. If you run console.log($("tbody").clone().children('tr')[mr_selector].children('td')[0]); you will get just a HTML element, not an jQuery element.
I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.
However, I can't manage to track it and I've been putting way too much time on this simple problem.
Here's my html :
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
And my jQuery:
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
alert(clipboard);
});
});
I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.
Also, how would you get the "Some text" part?
Thanks for your time.
value is not a valid property for td or anything else but input. You had to use data-value to be correct.
HTML:
<table>
<tr>
<td title="td_title_1" data-value="td_value_1">Some textElement_1</td>
<td title="td_title_2" data-value="td_value_2">Some other textElement_2</td>
</tr>
</table>
JS:
$(function(){
$(document).on('click','a[title="Copy"]', function(){
var clipboard = $(this).parent().data('value');
alert(clipboard);
});
});
* (star selector) is a tricky selector. Do not use it in every purpose.
The first thing is you need to use stopPropagation() so that it works only for the element you desire and the next thing is you can use the simple way to clone the element so that you get only the text part of <td> element that is the immediate parent of the clicked element.
$(function() {
$("*").on('click', 'a[title="Copy"]', function(e) {
var clipboard = $(this).parent('td')
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
Simply use $(this).parent().attr('value');
$(function(){
$(document).on('click','a[title="Copy"]',function(e){
var clipboard = $(this).parent().attr('value');
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').filter('[title="td_title1"]').attr('value');
alert(clipboard);
});
});
You should try with filter. Find function is for finding children, your intent is to filter the tds based on the criteria, and also change the val to .attr('value'), since .val is only for inputs only, but to read any attribute use attr
try
alert($(this).parent('td').attr('value'));
i created a dynamic table. it can be dynamically add,edit and remove rows.
When adding every td inside the table it also add a hidden field that contain value. that is,
<tr>
<td>This is Text <input type="hidden" value="someValue"></td>
</tr>
here is the code to get the innerHtml inside the td element.
var par = $(this).parent().parent(); //tr
var tdName = par.children("td:nth-child(1)");
tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
But when i using this code it show the text with input hidden type. That is,
This is Text <input type="hidden" value="someValue">
Here i dont want to get the hidden input field. I only need other part that is This is Text . Is it possible?
i tried tdName.children("input[type!=hidden]").val()
But it doesnt works.
Just use .text() to get the text in that row:
tdname.children().text()
FIDDLE
You can try this,
var txt = tdname.contents().filter(function () {
return this.nodeType == 3; //Filter it by text node
}).text();
var txt = $('.test').contents().filter(function () {
return this.nodeType == 3; //Filter it by text node
}).text();
alert(txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="test">This is Text
<input type="hidden" value="someValue" />
</td>
</tr>
</table>
Use :hidden selector, It will return only visible elements:
See this fiddle: http://jsfiddle.net/u66ez4gv/
You need that:
tdName.children("input:visible").val()
I have a table with HTML constructed using my servlet class.
When trying to delete a row in this table using a javascript function I must first of all put different id to separate elements.and i resolove it with hidden type like that:
retour.append("<td>");
retour.append("<input type=\"hidden\" id=\"id_"+nomTab+"_"+compteur+"\" value=\""+object.getIdDailyTimeSheet()+"\"/>");
retour.append("<button id=\"del\" name=\"del\" type=\"button\" onClick=DeleteARow('+id_"+nomTab+"_"+compteur+"')>");
retour.append("<img src=icon_delete.gif />");
retour.append("</button>");
retour.append("</td>");
As you can see each element has a delete button. What i want to know how can i delete one row.
thinks.
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
You should check out this dom page:
http://www.w3schools.com/js/js_ex_dom.asp
hope this helps.
I don't understand why you're using the <input type="hidden" />. Instead you should use some DOM scripting. (or jQuery)
Here's an example using DOM scripting:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Delete a Row Example</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var table = document.getElementById("the-table");
var buttons = table.getElementsByTagName("input"); // all the <input /> elements which were in the table
for(var i=0; i<buttons.length; i++) { // loop all over the <input /> elements in the table
if(buttons[i].name=="delete-this-row") { // if they are marked as "delete this row" inputs...
buttons[i].onclick = function() { // give them onclick even handlers
var buttonCell = this.parentNode; // now buttonCell is the <td> which contains the <input />
var deleteThisRow = buttonCell.parentNode; // now deleteThisRow is the row we want to delete
deleteThisRow.parentNode.removeChild(deleteThisRow);
}
}
}
}
//]]>
</script>
</head>
<body>
<table id="the-table">
<tbody>
<tr>
<td>0,0</td>
<td>1,0</td>
<td>2,0</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,1</td>
<td>1,1</td>
<td>2,1</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,2</td>
<td>1,2</td>
<td>2,2</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
</tbody>
</table>
</body>
</html>
The idea I'm using here is not to use an identifier on the row; instead use the position of the button to determine which row to delete. You delete the row its in.
Since I define the onclick event handler in my javascript (not in an onclick attribute) the function I used can access the clicked element, using the this keyword. From there, I can start climbing up this.parendNodes all the way to my <tr> element.
You should be able to do the same thing I've done with <input type="button" /> elements with a <button> element.
Alternately you could also use deleteRow(...).
The DeleteRow javascript method should have code to loop through the Table element, identify the row you want to delete and then invoke the delete method of the document object.
function DeleteARow(id) {
var row = document.getElementById(id);
if ( row ) {
row.parentNode.removeChild(row);
}
}
I am creating a dynamic table in which each row has a group of radio buttons placed in different columns.
I want to change the cell background color when a radio button is clicked.I am constructing the table using the code snippet below. How to identify the radio button in javascript, so that I can set the cell with an appropriate background color.
<table>
<c:forEach>
<tr>
<c:forEach>
<td><input type="radio" value="" /></td>
</c:forEach>
</tr>
</c:forEach>
</table>
Use dojo or jQuery to select the radioButton node, then use CSS filter expressions to set the td tag (parentNode dom node) to whatever color you want.
Example using dojo :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dojo selectors example</title>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function() {
// Get all the radioButtons that are inside a <td> tag
dojo.query("td > input").forEach(function(node, index, array){
var td = node.parentNode;
dojo.addClass(td, "red");
dojo.connect(td, "onclick", function(){dojo.toggleClass(td, "white");});
});
});
</script>
<style type="text/css">
.red { background-color : red; }
.white { background-color : white; }
</style>
</head>
<body>
<form id="form1">
<table>
<tr>
<td><input type="radio" value="" /></td>
</tr>
<tr>
<td><input type="radio" value="" /></td>
</tr>
<tr>
<td><input type="radio" value="" /></td>
</tr>
</table>
</form>
</body>
</html>
I'll leave it up to you to correct the radiobutton's behaviour...
you should try and set a unique id for the input field when creating it (e.g. id="theradiobutton")
Then you can reference it easily using DOM methods!
You need to set the id or use a fake class name.
Later I should use jquery for accessing and changing them.
http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery
var myform = document.forms['myform'];
for ( var i=0; i < myform.elements; i++ )
if ( myform.elements[i].type == 'radio' ) ...do your stuff
Hope it helps.
It's simple with jQuery. Here's an SSCCE, copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#tableId input[name=row]').click(function() {
$('#tableId tr').removeClass('selected'); // Reset.
$(this).parents('tr').addClass('selected');
});
});
</script>
<style>
tr.selected {
background: #ffc;
}
</style>
</head>
<body>
<table id="tableId">
<tr><td><input type="radio" name="row" value="row1">row1</td></tr>
<tr><td><input type="radio" name="row" value="row2">row2</td></tr>
<tr><td><input type="radio" name="row" value="row3">row3</td></tr>
</table>
</body>
</html>
Just translate the table back into the dynamic flavor you've had with JSP/JSTL.
Without getting too fussy about it, this is really pretty simple. You don't need to identify the radio button, just call an event handler and pass the instance of the button with it:
<td><input type="radio" value="" onclick="colorMyCell(this)" /></td>
and the handler:
function colorMyCell(inp) {
// get reference to the row
var tr = inp.parentNode.parentNode;
// put the TD children of the row into an array
var cells = tr.getElementsByTagName("TD");
// bgcolor all the other cells in that row white
for (var i=0; i<cells.length; i++) {
cells[i].style.backgroundColor = "#ffffff";
}
// now bgcolor the selected cell differently
inp.parentNode.style.backgroundColor = "#ffffcc";
}
Note that this is just a quick and dirty example of how to do this. You would want to take more care with it (make sure inp.parentNode.parentNode really is a TR, if not find a better way to work your way up the tree to find the actual first-ancestor TR), as well as using CSS classNames instead of directly setting background colors, and so on.