Develop Reference

Javascript: Modify InnerHTML

I'm new in JavaScript. I have table that can have one or more rows.
The first thing I do is verify how many rows I want to insert and use the following command to fill the table .
$('#optionsTable').html('<tr id="table"><td width="90%" colspan="2" class="cellheader".......></tr>)
When I have more than one row, I'm trying to use the innerHTML to get the row that was inserted before because I need to modify it. I mean if I have more than one row I don't need to have the second <td> tag (or it can be there but without the <a href></a> tag) and I need to have the text "Principal" in bold after the text "Tomorrow" in first <td>.
The innerHTML that I'm getting from the first row is the following:
<tr id="documento1">
<td width="90%">Tomorrow</td>
<td width="10%" align="center"><Remove></td>
</tr>
I've already check this, but it doesn't solve my problem.
Does anyone can help me finding a solution to change the innerHTML please?

How to have clickable table row send parameters to Struts action class?

I have a HTML table where each row is clickable. Here is how I have them clickable:
$(".clickable-row").click(function() {
window.document.location = "${pageContext.request.contextPath}/ActionClass";
});
<tr class="clickable-row">
<td class="text-left">some parameter</td>
...
</tr>
I am not sure how to pass the data from the clicked table row to the struts action since I am using a Javascript function to handle the click/navigation. In the past I was able to use something like:
<s:url action="ActionClass" var="actionLink" >
<s:param name="param1">${param1}</s:param>
<s:param name="param2">${param2}</s:param>
</s:url>
<s:a href="%{actionLink}">go to Action</s:a>
But I can't use the <s: tags inside the JS function. What is the best way to go about this?
Not really a duplication question. This was more specific how to get a table row parameter sent to an action by a clickable row. I was able to get a parameter to send by a column button, but never received an answer that helped with a clickable row.

You can create a column with hyper link that passes parameters to action like:
<td>
<s:a href="test.action?param1=%{param1}><s:property value="param1"/></s:a>
</td>

I decided to add a select button column that submits a form for the row the button is on.

Print each loop of <c:foreach> individually using javascript

Currently I'm printing the whole page with print icon using following code:
<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" />
</a>
I am reading a list of objects in JSP and displaying the object details using <c:foreach>.
I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.
I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?
Edit:
Example:
<c:forEach var="case" items="${distributions}">
<table>
<tr>
Print case details
</tr>
</table>
</c:foreach>
If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.

I have not done the following but theoretically it should work:
1) define a print stylesheet, with:
body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}
2) define an event listener, e.g. with jQuery
$(".detail-item .print").click(function(e) {
$("body").addClass("detail-print");
$(this).closest(".detail-print").addClass("current");
window.print();
});
This should only print what is visible in your print stylesheet.
The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...

In your block you could put the data in a td then use the method described in this post to print the contents of that td.
<script type="text/javascript">
$(function(){
$(".printable").each(function(){
var $td = $(this);
var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
$td.parent().append($printIconTD);
$printIconTD.click(function(){
Popup($td.html());
});
});
});
</script>
....
<c:forEach var="case" items="${distributions}">
<table>
<tr>
<td class="printable">Print case details</td>
</tr>
</table>
Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know

A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.

How to create dynamic row of table using Struts 1.3 and javascript

I have a contact table, this table contains a first name, a last name, and multiple phone numbers. So my model is something like
Contact {
String firstName;
String lastName;
List phones;
}
Phone {
String category; //home, work, mobile, etc
String phoneNumber;
}
So it will have web page contains two input text for first name and last name, and an add phone button. When add button is clicked, it will generate two input text again for category and phone number, and an delete button to that row.
I have tried using indexed=true, it will generate an html like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
The problem is, i dont know how to write the javascript, because i dont know what is current index if user click add button, how about if user have clicked delete button and then add button, what index it will be? It is ok if i have missing index? Something like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />
Note: please consider for the edit scenario too.

The first thing here is to use well the indexed and logic:iterate tags to generate the code. If having doubts about this, check out this answer given by me, which explains in detail how to use indexed attributes in struts: indexed and logic:iterate
Then, you have to consider the scenario where an user wants to add or delete rows, and update indexes correctly so struts will be able to retrieve data as you submit the form. I encountered this problem once and what I did was:
on add: using javascript, find out what is the last line of the table and, by looking at the generated code of the page, generate a new table row with empty contents, the index inside the square brackets. Finally, add to table
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf</td></tr>
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>
to add a row, create it in javascript like this:
var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>
and append it to the table.
on del:Using the same technique as above find out which line (or corresponding index) was deleted. Then, edit the indexes of the remaining rows so that it matches the order of elements for the subsequent rows.
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
let's say you delete asdf1 by removing it from the dom. then, the new table will look like this:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
now we have to update indexes so it matches the right order, by changing the name of the second td to have an index of 1, that way, the table is back to a struts indexed format:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>
I hope it's clear enough. I obviously can't write all the js functions, since they require some work, but with this information you can make it on your own.

How to remove an element without id

I have the following code:
<%-- other tags --%>
<table>
<tr width="100%">
<td width="130" />
<td id="BottomCell" width="100%" />
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
<%-- other tags --%>
There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?
Thanks.
BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.

Wow, going back to basics after using a framework is hard work.
var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);

In jQuery:
$('#BottomCell').prev().detach();

Well, assuming you have only one table, then you could do something like this (in javascript):
var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);
It would get the first cell of the first row in the entire DOM tree, and remove that cell.

tr > td should do the trick.
Child and Sibling selectors
http://css-tricks.com/child-and-sibling-selectors/

#diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like
var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);

In jQuery I would find the parent and use the :first selector probably