I have a question about dynamic tr with keep the content of td.
I have a table like flowing code:
<table id="map2">
<tr>
<td class="15c">15</td>
<td class="16c">16</td>
<td class="17c">17</td>
</tr>
<tr>
<td class="15c">15</td>
<td class="16c">16</td>
<td class="17c">17</td>
</tr>
</table>
I added some jQuery code that create a column dynamically. Like flowing code:
$('#map2').on('mouseenter', 'td:last-child', function(){
var tdClass = $(this).attr('class');
var newClass = parseInt(tdClass);
if(newClass <= 30) {
$(this).after('<td class="'+ (newClass+1) +'c">'+ (newClass+1) +'</td><td class="'+ (newClass+2) +'c">'+ (newClass+2) +'</td><td class="'+ (newClass+3) +'c">'+ (newClass+3) +'</td>');
} else {
alert('end!')
}
});
$('#map2').on('mouseenter', 'td:first-child', function(){
var tdClass = $(this).attr('class');
var newClass = parseInt(tdClass);
if(newClass >= 3) {
$(this).before('<td class="'+ (newClass-3) +'c">'+ (newClass-3) +'</td><td class="'+ (newClass-2) +'c">'+ (newClass-2) +'</td><td class="'+ (newClass-1) +'c">'+ (newClass-1) +'</td>');
} else {
alert('end!')
}
});
That code create a td for me, now I want to create a tr (row) with keep the content. For example when the new row was created, that had content like before td in before tr.
I tried some code like this:
$('#map2').on('mouseenter', 'tr:first-child', function(){
var trCont = $(this).html;
// $(this).before('<tr>'+ trCont +'</tr>');
$(this).before('<tr><td>new row</td></tr>');
});
but didn't work.
How can I solve this problem?
http://jsfiddle.net/H6MSS/2/
Related
I have a function in which I take the first TR of my table and then I take all the TD of this TR.
Now I need to modify this function: when I take the first TR I need to check that if all the TD of my TR have the class 'HD1' I need to take the second TR of the table.
I put my function below. Thanks in advance.
function getColumnsIdx(id) {
var header = $("table#" + id + " thead tr:eq(1)");
var header_fields = $("td", header);
var header_idx = new Object();
header_fields.each(function(idx, val) {
var $$ = $(val);
var key = $$.text();
header_idx[key] = idx;
});
return header_idx;
}
You can look for the first td without that class, and then take its parent:
var header = $("table#" + id + " thead tr td:not(.HD1):eq(0)").parent();
This could, however, result in getting the third/fourth/etc row. If you must always return the second row, even if those cells also all have the HD1 class:
var header = $("table#" + id + " thead tr:eq(0)");
var header_fields = $("td", header);
if (header_fields.length && header_fields.length == header_fields.filter(".HD1").length) {
header = header.next();
header_fields = $("td", header);
}
Note: :eq() uses a zero-based index, so use eq(0) to select the first element.
You can check if the first row contains only class="HD1" elements by comparing the length of that selector to the length of the <td> elements in general.
If they're the same length (all of the <td> are HD1) - use the second row. Otherwise, use the first.
With HD1:
let $row = $("thead tr:first > .HD1").length === $("thead tr:first > td").length
? $("table tr").eq(1)
: $("table tr").first();
$row.css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="HD1">1</td>
<td class="HD1">2</td>
<td class="HD1">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Without HD1:
let $row = $("thead tr:first > .HD1").length === $("thead tr:first > td").length
? $("table tr").eq(1)
: $("table tr").first();
$row.css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
This question already has answers here:
contenteditable change events
(21 answers)
Closed 6 years ago.
I am trying to show to alert When a row of my table is modified but esta not work. Here my code . Thanks!
$(document).ready(function(){
$("#table").change(function(){
alert("The text has been changed.");
});
});
<table border="3" id='table' >
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true' id='bebe'>a</td>
<td contenteditable='true'>a</td>
</tr>
<tr>
<td contenteditable='true'>a</td>
<td contenteditable='true'>a</td>
</tr>
</tbody>
</table>
UPDATED
This is when you want to check whenever the user pres a key in their keyboard
$(document).ready(function(){
var val1;
var val;
$("#table tbody tr td").on('keypress',function(){
val = $(this).text();
//alert(val);
});
$("#table tbody tr td").keyup(function(){
val1 = $(this).text();
if(val1!=val){
alert("text has changed");
}
});
});
This is if you want to trigger only when user leaves the box
$(document).ready(function(){
var val1;
var val;
$("#table tbody tr td").on('focus',function(){
val = $(this).text();
//alert(val);
});
$("#table tbody tr td").focusout(function(){
val1 = $(this).text();
if(val1!=val){
alert("text has changed");
}
});
});
I have a table and for one of the <td> I want to generate the <a> tags dynamically using JavaScript.
Writing a small snippet of the code.
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach (var item in list)
{
<tr>
<td>...</td>
<td>...</td>
<td> MyFunction(item.Parameter1) </td> // dynamic anchor tag
</tr>
}
</tbody>
</table>
JavaScript function.
MyFunction(Parameter1)
{
var aTag = "";
.....
..... //some formatting as per needs
aTag = '<a id="' + someId + '" alt="' + someAlt + '" title="' + someTitle + '" style ="color:Blue;text-decoration:underline;" href="#" onclick="fnAnotherFunction(' + P1 + ',' + P2 + ');">' + NameofTheTag + '</a>';
return aTag;
}
How can the string returning aTag form an <a> tag at the <tr> <td>..?
Is this possible or is their a better solution to this.
You could use .append() or .appendTo()
$('selectorForTD).append(MyFunction(item.Parameter1))`
or
var anch = MyFunction(item.Parameter1);
anch.appendTo($('selectorForTD');
I think this is what you're after.
Edit:
Since you're using jQuery, you could create your anchor element like:
MyFunction(Parameter1)
{
// var aTag = "";
.....
..... //some formatting as per needs
var aTag = $("<a>",{id:someID, alt:someAlt, title:someTitle}).css({ ...cssRules...}).click(function(e)
{
fnAnotherFunction(P1,P2);
});
return aTag;
}
Here's a quick fiddle to illustrate.
I have a table hooked up to the jQuery datatable. Based on this example I want to add "hidden" child rows to show extra information.
I have the following jsfiddle where I have a name/value pair.
<tr data-child-name="Name1" data-child-value="Value 1">
<td class="details-control"></td>
function format ( name, value ) {
return '<div>' + name + ': '+ value + '</div>';
}
$(document).ready(function () {
var table = $('#example').DataTable({});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child( format(tr.data('child-name'), tr.data('child-value') )).show();
tr.addClass('shown');
}
});
});
My question is how do I add more than one name/value pair? So that I can define various rows like in the datatables.net example.
My source is a php-script that generates html like in the jsfiddle example.
It's probably an easy task but my jQuery skills are very limited :-)
Thank you.
UPDATE:
The data comes from an ldap query:
$ldapResults[$i]
echo "<td>" . utf8_encode($ldapResults[$i]['sn'][0]) . "</td>"
If you want to keep data attributes for your data source, you can do something like this
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
}
return html += '</table>';
}
$(function () {
var table = $('#example').DataTable({});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Key 1' : tr.data('key-1'),
'Key 2' : tr.data('key-2')
})).show();
tr.addClass('shown');
}
});
});
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody>
<tr data-key-1="Value 1" data-key-2="Value 2">
<td class="details-control"></td>
<td>data 1a</td>
<td>data 1b</td>
<td>data 1c</td>
<td>data 1d</td>
</tr>
<tr data-key-1="Value 1" data-key-2="Value 2">
<td class="details-control"></td>
<td>data 2a</td>
<td>data 2b</td>
<td>data 2c</td>
<td>data 2d</td>
</tr>
</tbody>
</table>
You can create an array of the data you need to show for each row
EG :
var data = [
{ key1 :'value1', key2 :'value2', key3 :'value3'}, //Row1
{ key1 :'value1', key2 :'value2'} //Row2
];
And updated the format()
function format (index ) {
var json_data = data[parseInt(index)];
var op = '';
$.each(json_data, function(key, value){
op +='<div>' + key + ': '+ value + '</div>';
});
return op;
}
Now just add the index of the array in a custom attribute <tr data-child-index="1">
And finally row.child(format(tr.data('child-index'))).show();
EDIT : No html changes needed.
Calculate the index dynamically using jQuery index()
row.child(format($('#example td.details-control').index($(this)))).show();
DEMO
If are are getting json data to show as child then try it like,
else {
// Open this row
// pass your json data to show in details
row.child( format(myJsonData)).show();
tr.addClass('shown');
}
And in the format function change it like,
function format ( json ) {
var $json=$.parseJSON(json);// if not parsed
var str='';
$json.each(function(key,value){
str += '<div>'+key+':'+value+'</div>';
});
return str;
}
I have this code
var users = result.users; // array
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
open: function() {
$(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");
},
buttons: {
"Okay": function() {
$(this).dialog("close");
},
Cancel: function() {
is_okay = 0;
$(this).dialog("close");
}
}
});
where the array contain data in the form of
{"ss":"Sandra Schlichting","fn":"Full name"}
What I am trying to accomplish is to get the content of the arrays in the form of (white space inserted for readability)
<table>
<tr> <td>Initials</td> <td>Full Name </td> </tr>
<tr> <td>ss </td> <td>Sandra Schlichting</td> </tr>
<tr> <td>fn </td> <td>Full name </td> </tr>
</table>
and have that replaced with <b>New text goes here</b> in
$(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");
From what I can tell $.each() should be used for this.
But still I can't quite figure out how to get started.
Can anyone help me out?
You can use a JS for-in to loop through it.
<table id='nameTable'>
<tr> <td>Initials</td> <td>Full Name </td> </tr>
</table>
var names = {
"ss": "Sandra Schlichting",
"fn": "Full name"
};
var $table = $('#nameTable');
var row = '';
for (name in names) {
row += '<tr><td>' + name + '</td><td>' + names[name] + '</td></tr>';
}
$table.append(row)
Here's a fiddle : http://jsfiddle.net/exP2b/4/
function makeTable(users) {
var result = '<table><tr><td>Initials</td><td>Full Name</td></tr>\n';
$.each(users, function(index, value) {
result += '<tr><td>' + index + '</td><td>' + value + '</td></tr>\n';
});
result += '</table>';
return (result);
}
alert(makeTable({"ss":"Sandra Schlichting","fn":"Full name"}));
Working here
$.each documentation