Develop Reference

Clone table rows with select element inside td tag

I'm new to JS. I have a dynamic table (I didn't add the code for add and delete rows) which I want to show in another table. I try to clone every row. Everything is working but td tag with select element doesn't cloned properly. It shows the selected value or the first value if there is no selected. The idea of this clone is to show the table in modal form and the cloned table will be like a preview. Cloning happened when the modal foem is show. In code below I add the button for cloning table. I think, it doesn't matter in this case.
This is the Fiddle link.
Here is my code HTML:
<table class="table table-bordered" id="table" >
<thead>
<tr>
<td >#</td>
<td >Description</td>
<td >Qty</td>
<td >Units</td>
<td >Price without vat</td>
<td >Vat %</td>
<td >Total</td>
<td >Del</td>
</tr>
</thead>
<tr class="product">
<td class="cloned" width="4%" >
<input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
</td>
<td class="cloned" width="34%">
<input type="text" class="item_product" style="width:100%;" name="product[]">
</td>
<td class="cloned" width="18">
<input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
</td>
<td class="cloned" width="7%">
<input id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
</td>
<td class="cloned" width="10%">
<input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
</td>
<td class="cloned" width="7%" id="vat_td">
<select class="vat" id="vat" name="vat[]" type="text">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<input class="hidden" hidden value="1" id="payer_vat_hidden">
<td class="cloned" width="17%">
<input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
</td>
<td class="delTD" width="5%">
<button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</table>
<button onclick="copyTable()">copy table</button>
<table class="table table-bordered" id="second_table" >
<thead>
<tr>
<th>#</th>
<th>DESCRIPTION</th>
<th class="text-center">QUANTITY</th>
<th class="text-center">UNITS</th>
<th class="text-right">PRICE</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here is my code Javascript:
function copyTable(){
$("#second_table tr").remove();
$("#table tr").each(function() {
var $target = $("#second_table");
var $tds = $(this).children(),
$row = $("<tr></tr>");
$row.append($tds.eq(0).clone())
.append($tds.eq(1).clone())
.append($tds.eq(2).clone())
.append($tds.eq(3).clone())
.append($tds.eq(4).clone())
.append($tds.eq(5).clone())
.append($tds.eq(6).clone())
.appendTo($target);
});
}

how to make editable text in edit case using jquery

I have a table like every table have their edit button :
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name"><?php echo $aircrews->fname.' '.$aircrews->lname; ?></p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status1; ?></p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status2; ?></p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
My problem is that when I click on particular edit then its corresponding p tag should be hidden and input type=text should be visible but in my case, by clicking on "edit" button, every p tag getting hide and showing all input text instead of particular tags.
My jQuery code is given below:
<script type="text/javascript">
$(document).ready(function(){
$('.text').hide();
$(this).on('click', function(){
alert('ok');
$('.name').hide();
$('.text').show();
})
})
</script>
I am a new be here can anyone please help me related this? thanx in advance. I want only clickable edit open their text boxes instead how cs
My view is like this :
https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost
i want click on edit and name pay1 and pay2 should be text

Remove the .class delcarations since the event will apply to every one of them in .hide() and .show(). Put the click event directly on all p in this case. (Can easily be adjusted to your specs).
Put this instead of your class in 'show() and hide(). To show the current <td>s .text class you can use the jQuery .siblings() function and specificy the .text sibling directly.
EDIT:
Since you want to have the text change when you hit the Edit button and not each p then you can place p with .edit_btn, and traverse up and down the DOM using .parent() and .children() functions.
$(document).ready(function() {
$('.text').hide();
$('.edit_btn').on('click', function(e) {
console.log(this);
$(this).parent().siblings('td').children('p').hide();
$(this).parent().siblings('td').children('.text').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">
Name </p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

You are accessing the elements by class. $('.name') returns all elements of class name, also $('.text') returns all elements of class text, not just the one you clicked on.
So you need to give individual elements unique ids and select by id $('#id').
See https://api.jquery.com/id-selector/

You should change Javascript part like this:
<script type="text/javascript">
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
</script>
In jQuery, .parents() function will check for the parents of "edit_btn" class which is <td>. Then .siblings() function consider all the siblings of <td> tag which comes under the same <tr> tag. Then .children('p') function will check for childrens with <p> tag means it consider <p> tags which are under those <td> tags and then hide() function will hide that particular <p> tag. Check below Snippet.
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 1_1</p>
<input class="text" type="text" name="name" value="Value Here 1_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input type="text" class="text" name="pay1" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 3_1</p>
<input type="text" class="text" name="pay2" value="Value Here 3_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input class="text" type="text" name="name" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_2</p>
<input type="text" class="text" name="pay1" value="Value Here 2_2" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_3</p>
<input type="text" class="text" name="pay2" value="Value Here 2_3" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

Canvas HTML5 rendering on Safari - strange results compared with Firefox and Chrome

I have an issue concerning a canvas HTML5, especially its rendering in Safari. This rendering is good on Firefox and Chrome but not with Safari.
Here's a capture of this canvas on Firefox :
and the capture with Safari :
As you can see, there's an issue with Safari : the left menu (masses, initial positions, initial speeds) is flattened (see the 3 parameters lines compressed).
I don't know where this issue could come from. You can check this rendering on this link.
Here's the part of code which represents this HTML5 canvas :
<div class="container" style="max-width:750px;">
<table>
<tr>
<td colspan="3">
<div class="col-md-12">
<label for="slider"><b>Axis lengths</b></label>
<br>
<input id="slider1" type="hidden" class="span2" value="" data-slider-min="4.8" data-slider-max="235.2" data-slider-step="4.8" data-slider-value="[81.6,158.4]" />
</div>
</td>
<td rowspan="5">
<canvas id="pendulumCanvas" width="500" height="500" style="border:1px solid black;">
</canvas>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab1" tabindex="-1"><b>$\mathbf{M_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab1" tabindex="1"/>
</td>
<td class="col-md-4">
<label for="lab2" tabindex="-1"><b>$\mathbf{M_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab2" tabindex="2"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{M_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab3" tabindex="3"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab4" tabindex="-1"><b>$\mathbf{\Theta_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab4" tabindex="4"/>
</td>
<td class="col-md-4">
<label for="lab5" tabindex="-1"><b>$\mathbf{\Theta_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab5" tabindex="5"/>
</td>
<td class="col-md-4">
<label for="lab6" tabindex="-1"><b>$\mathbf{\Theta_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab6" tabindex="6"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab7" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab7" tabindex="7"/>
</td>
<td class="col-md-4">
<label for="lab8" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab8" tabindex="8"/>
</td>
<td class="col-md-4">
<label for="lab9" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab9" tabindex="9"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab10" tabindex="10"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab11" tabindex="11"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab12" tabindex="12"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
<div class="center">
<button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
<button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
</div>
</td>
</tr>
</table>
</div>
<br><br>
<br>
<script type="text/javascript" src="./js/triple_pendulum.js">
</script>
</td>
If someone could give me some clues to solve this strange rendering on Safari.
Regards

You are seeing a difference because of the way that extra space is distributed between table cells in the various browsers. In the current version of Safari each cell is only taking up as much space as it needs. This leaves a bunch of extra space left over on the last cell. The code below demonstrates this.
#canvas, #cell-1, #cell-2 {
color: white;
font-family: sans-serif;
}
#canvas {
background-color: green;
padding: 100px;
}
#cell-1 {
background-color: red;
}
#cell-2 {
background-color: blue;
}
<table>
<tbody>
<tr>
<td id="cell-1">CELL 1</td>
<td id="canvas" rowspan="2">CANVAS</td>
</tr>
<tr>
<td id="cell-2">CELL 2</td>
</tr>
</tbody>
</table>
There are many solutions to this problem. You could try adding some padding to the td elements as shown below.
#canvas, #cell-1, #cell-2 {
color: white;
font-family: sans-serif;
}
#canvas {
background-color: green;
padding: 100px;
}
#cell-1, #cell-2 {
padding: 50px 0;
}
#cell-1 {
background-color: red;
}
#cell-2 {
background-color: blue;
}
<table>
<tbody>
<tr>
<td id="cell-1">CELL 1</td>
<td id="canvas" rowspan="2">CANVAS</td>
</tr>
<tr>
<td id="cell-2">CELL 2</td>
</tr>
</tbody>
</table>
A better solution may be to take a look at your use of tables and how you might accomplish a similar result using CSS and positioning or even flexbox.

AngularJS increment id value of items in nested repeater

I have the following code in which there are questions and choices and I need the choices to have incremented id values.
However, I need the incrementation to restart each time there is a new question. Most of the examples I've found so far increment for all (e.g. using $index). But I've looked at several articles here on SO such as this one and not getting the results that I need:
What I need is this:
Question 1
Choice10 (the first numerical value is the Id of the question,
Choice11 the second numerical value should be the incremented id)
Choice12
Question 2
Choice20
Choice21
Choice22
Choice23
The html code looks like this:
<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions track by $index">
...Question details here...
</tr>
<tr>
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions">
...Question details here...
</tr>
<tr ng-repeat-end="">
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each ng-repeat has its own index and you can access the index from the nested loop. However be aware that with your implementation the id inChoice111 might be misleading.
Question 1.11 == Question 11.1

Get value from td when button is clicked.

This is a part of my JSP code:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;"><%=i++%></td>
<td id="leaveID" class="leavehistory" style="width: 9%;"><%=rs.getString(7)%></td>
<td class="leavehistory" style="width: 12%;"><%=rs.getTimestamp(1)%></td>
<td class="leavehistory" style="width: 10%;"><%=rs.getInt(2)%> days</td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(3)%> - <%=rs.getString(4)%></td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(5)%></td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<% } %>
This is how 2 rows of the generated HTML output look like:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">1</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000002</td>
<td class="leavehistory" style="width: 12%;">2012-01-17 19:31:18.0</td>
<td class="leavehistory" style="width: 10%;">2 days</td>
<td class="leavehistory" style="width: 15%;">18/01/2012 - 19/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">2</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000003</td>
<td class="leavehistory" style="width: 12%;">2012-01-18 03:04:15.0</td>
<td class="leavehistory" style="width: 10%;">1 days</td>
<td class="leavehistory" style="width: 15%;">19/01/2012 - 20/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
These 2 rows of data are retrieved from database. For each row there is one View and Change button. If I click on the Change button for the LE000001's row, then I will get the value - "LE000001". Then I can use the value to update the status of leave record.
If I click on the Change button for the LE000002's row, then I will get the value - "LE000002". Since there are only 2 rows shown.
It can be as many as possible if the database has more records. Is there any way to get the value?

First of all, your HTML is invalid, because you have several elements with the same leaveID ID.
Now to answer your question, why don't you simply make your JS functions take the ID of the row as argument:
onClick="cancelSub('LE000001');"
and thus to generate it:
onClick="cancelSub('<%= rs.getString(7) %>');"
That said, using scriptlets and accessing JDBC resultsets from a JSP shows a lack of proper MVC architecture. Read How to avoid Java code in JSP files?