Clone a <tr> and modify the clone's content in JavaScript / jQuery - javascript

I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks

Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");

Related

Class="ng-hide" get appended automatically though I am using ng-show with correct syntax

I need to show/hide tr tag of a table as per the scope value in the controller. I have written the code as shown below but class="ng-hide" gets appended everytime with tr tag automatically though I have declared my ng-show with correct syntax.
<div ng-show="IsParentExist">
<table>
<thead>...</thead>
<tbody>
<tr ng-show="noValueExist">
<span>There are no records to show here..</span>
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
Here is a problem when it gets rendered in DOM as below
<div ng-show="IsParentExist">
<span>There are no records to show here..</span>
<table>
<thead>...</thead>
<tbody>
<tr class="ng-hide" ng-show="noValueExist">
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
I have assigned the scope variable in controller as below
$scope.noValueExist = true;
Until you set the value of noValueExist as true in controller, angular sets the class as ng-hide by default.Add this line in controller.
$scope.noValueExist = true;
Try replacing ng-show="noValueExist" by ng-hide="!noValueExist"
<tbody>
<tr ng-hide="!noValueExist">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
In your controller, initialize your value.
$scope.noValueExist = false;
And when you need to show your <tr> element set this value to true.
$scope.noValueExist = true;
I hope this will help you.
As user #cst1992 mentioned the issue was with span was not wrapped in .
The span is getting misplaced because it is not supported inside 'tr' tag.
You need to use 'td' tag to show content inside table.
After replacing 'span' with 'td' tag,it gets rendered in DOM as below.
<div ng-show="IsParentExist" class="ng-hide">
<table>
<thead>
<tr><th>a</th>
<th>b</th>
</tr></thead>
<tbody>
<tr ng-show="noValueExist" class="ng-hide">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>

Jquery Clone() and replace text

I have an big table I need to create multiple times in the same page, but I'm not sure have to do. I thought the easiest way is to have the table as an partial view hidden on the page, and each time I need it I will clone it from my jQuery code. I know have to clone it, but I'm not sure have to insert the text into the specific span's, before I insert it.
This is a small example of my table. Can somebody help me with this problem
< div id="ToClone">
<table >
<tr>
<td>
<table>
<tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
<tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
<tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var History = (function () {
$(function () {
var tblClone = $("#ToClone").clone();
});
}());
</script>
You will need to resolve the problem of duplicate ids first. I suggest changing them to classes.
I recommend a little trick of using a dummy script block for your template. This is great for maintenance and browsers just ignore the unknown type so you can insert any elements:
<script id="ToClone" type="text/template">
<table>
<tr>
<td>
<table>
<tr>
<td><b>MMS_RepairLabel:</b>
</td>
<td align="right"><span class="RepairId"></span>
</td>
</tr>
<tr>
<td><b>MMS_MWTLabel:</b>
</td>
<td align="right"><span class="MWT"></span>
</td>
</tr>
<tr>
<td><b>MMS_MDTLabel:</b>
</td>
<td align="right"><span class="MDT"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</script>
Then clone with your inserted values like this:
var $clone = $($('#ToClone').html());
$('.RepairId', $clone).text(repairIdValue);
$('.MDT', $clone).text(mdtValue);
$('.MWT', $clone).text(mwtValue);
// Do something with the clone
JSFiddle: http://jsfiddle.net/TrueBlueAussie/381ugdvr/1/
If i can get what you are looking for, look this solution:
jQuery:
$('.pasteTable').each(function(){
var RepairId = $(this).data('repair-id');
var MWT = $(this).data('mwt');
var MDT = $(this).data('mdt');
$(this).html('<table><tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span class="RepairId">' + RepairId + '</span></td></tr><tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span class="MWT">' + MWT + '</span></td></tr><tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span class="MDT">' + MDT + '</span></td></tr></table>');
});
Anywhere in your code you want the table to be cloned, just insert a with 'data' attributes:
HTML:
<div class="pasteTable" data-repair-id="#1" data-mwt="baby" data-mdt="ball"></div>
Demo:
http://jsfiddle.net/zf09m0at/3/

Add Column to table with jQuery

Is it possible to add a column to an existing table like this:
<table id="tutorial" width="600" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
with js?
you can do like this
$('#tutorial').find('tr').each(function(){
$(this).find('td').eq(n).after('<td>new cell added</td>');
});
n can be replaced by the number after which column you want to add new column
You can use .append() to append a new td to the rows
$('#tutorial tr').append('<td>new</td>')
Demo: Fiddle
You mean column not row?
$('#tutorial tr').each(function()
{
$(this).append('<td></td>');
});
Which selects the <tr> element inside id "tutorial" (that is your table is this case) and append new contents behind its original contents
An alternative option to those above is to create the column together with the other and a style of display:none; and then using the method .Show() to display.

Counting table row tags in text

I'm trying to count how many starting table row tags <tr> that would be in the following text. Keep in mind that I said text, not html. I get this data back in a textarea (don't ask) and I need to count how many starting tr tags are in this textarea. How would I do that? Whats the appropriate method in jquery to achieve this?
<textarea name='details' id='details'>
<table>
<tbody>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
</tbody>
</table>
</textarea>
you can do:
var temp =$('#details').val();
var count = temp.match(/<tr[^>]*>/gi);
jsfiddle
now count <tr > <tr class=""> <TR>
You should wrap your text in a jquery object and then use length property:
var myText = $.trim($('#details').val());
var numberTRs = $(myText).find('tr').length;
jsFiddle ©Blake Plumb 2013 ;)

jQuery replace and add new element

I have the following HTML
<tbody class="t_bdy">
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
</tbody>
I need to insert new <tr> when I click on button with .crm_insert class.
When .crm_insertis clicked, it need to insert a new row at the current location. All
other rows will move down. For example, if insert against row 3 is clicked then
row 3 will be new row inserted and current row 3 etc will move down to become
row 4 etc.
How can I achieve this ?
All answers are good, but I can only accept one : Thanks all
I'd try something like this using closest() and before()
$('a.crm_insert')
.click(function()
{$(this).closest('tr.Quotation_List_td').before(htmlcodeofyounewTRhere);}
)
Hope this will help
Assuming:
Your new row is in the same structure as your current row
You want the new row to also have the 'Insert' functionality
You want a click event handler which does something to this effect:
$('.crm_insert', '#table').on('click', function() {
var currentRow = $(this).closest('tr');
currentRow.clone(true).insertBefore(currentRow);
});
Where #table is the id of your table.
Here's a simple example
If you are inserting something completely different, then you do not need to use on() or clone(), and the code becomes simpler:
$('.crm_insert').click(function() {
var currentRow = $(this).closest('tr');
$('<tr />').insertBefore(currentRow);
});
Where <tr /> would be whatever you are trying to insert.
This might work for you. It'll find the parent tr of the button you just clicked, clone it (including the onClick functionality of the button) and insert that before the parent tr. This will result in a new row containing the same information as the target row though. Depending on what results you want to show in the new row, you might want to alter the code to clear out any copied values too.
$(".crm_insert").live("click", function(){
var tr = $(this).parents("tr.Quotation_List_td");
tr.clone().insertBefore(tr);
});
You can try this
$('.crm_insert').live('click', function(){
var self = $(this);
self.parents('tr.Quotation_List_td').before('add your row here');
});
The latest versions of jquery employ on instead of live.

Categories