I have the following table that is populated with data taken from a database at runtime:
while($stmt -> fetch()){
//While there is still data being fetched, make the table rows below
echo "<tr data-id='$matchid'><td>
<img class='delete_imgs' data-id='$matchid' src='Images/delete_icon.png'>
<img class='edit_imgs' data-id='$matchid'src='Images/edit_icon.png'></td>
<td id='hero_column$matchid'>$hero</td>
<td id='result_column$matchid'>$result</td>
<td id='gamemode_column$matchid'>$gamemode</td>
<td id='mmr_column$matchid'>$mmr</td>
<td id='confirm_button$matchid all_cons' style='display: none'><img src='Images/confirm.png'></td>
</tr>";
}
The important parts are the <td> lines. I wish to use jQuery to edit the contents of that cell. So for example, I have <td id='hero_column11>randomdata</td> (the 11 being its potential runtime value). How do I use jQuery to change the 'randomdata' into something else?
try this:
$(document).ready(function(){
$(document).find('td[id^="hero_column"]').html('new value');
});
I have include it inside document.ready() but you can insert it when you click a button or soething else
Try with:
$('#hero_column11').html('new data');
You can include this in a onclick event on a button or a link.
Related
I have a specific rows in a HTML table that I do not want to be displayed when the page loads.
There will be an Ajax request made after the page loads that returns values that would populate the table rows.
So I would want to display these rows only after the Ajax returns with a response and until then I want to display a 'loading' message in place of these rows.
I tried adding these rows in a div and used jquery's show()/hide() appropriately but that didn't work.
I'm new to JS and jQuery, so any help is appreciated.
<html>
<body onload="my_ajax_func()">
<table>
.
. <!-- Other rows that will be displayed-->
.
<tr>
<th colspan=2 class="custHeader">High Value Flags</th>
</tr>
<tr>
<td align=right><div id="loading_msg"><b>Loading..</b></div></td>
</tr>
<tr>
<td id="val_header" class=caption>Value Tier: </td><td id="val"> </td>
</tr>
<tr>
<td id="hypo_val_header" class=caption>Hypo Value Tier: </td><td id="hypo_val"> </td>
</tr>
<tr>
<td id="service_type_header" class=caption>Service Type: </td><td id="service_type"></td>
</tr>
</table>
</body>
<script>
function my_ajax_func() {
//retrieves values for table rows
//on success calls another func, say display_data
}
function display_data() {
$("loading_msg").hide();
document.getElementById("val").innerHTML = <some_value>;
document.getElementById("hypo_val").innerHTML = <some_value>;
document.getElementById("service_type").innerHTML = <some_value>;
}
</script>
</html>
Basically, I want a div for 'loading' message which would be displayed by default. Once Ajax request completes successfully, that div must be hidden and another div (with these 2 table rows) must be displayed in it's place.
To hide your rows at page loading, just create two css classes like this:
.displayNone{
display:none;
}
.displayBlock{
display:block;
}
and use this class in your rows
<tr class="displayNone"></tr>
So when page loads, this rows will be hidden.
So, in ajax success put this js:
$(".displayNone").removeClass("displayNone").addClass("displayHidden");
Then, download some loading gif image like this:
http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif
After that, wrap this img tag in a div with "displayNone" class too, and use inverse way of your rows:
Before your ajax call, remove "displayNone" class from it, and put "displayBlock".
Finally, in ajax success, remove "displayBlock" class from div, and put back "displayNone" to hide it again.
Hope it help.
Some doubts, please let me know.
Regards
You Can use .done() method
$.post( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "ajax request completed" );
})
If you only need to change text values in the rows, you might be able to get away with a class value of "display: none" in CSS for each complete row, until you are ready to update it. But you are going to have to have some unique ID for each, or way of counting children, in order to find that row again when you need to update it. Also, your table needs to be valid without those rows.
The other way to handle this would be to just add new rows dynamically. If you do this, remember the rows do not exist in DOM until you insert them there, and so you can't reference them before.
as mentioned above ajax has some methods like before and done where you have opportunity to show and hide your elements.
<table>
<thead>
<tr><th>header 1</th><th>header2</th><th>header3</th><tr>
<tr id="loadingrow"><th colspan=3>Loading Data...</th><tr>
</thead>
<tbody>....
$.ajax({
url: "http://fdafdas",
beforeSend: function( ) {
$('#loadingrow').show();
}
})
.done(function( data ) {
$('#loadingrow').hide();
//load your data
}
});
I have a simply html table, and script that deletes a row whenever delete is clicked, however as soon as I refresh the page the deleted row re-appears again. How can I actually delete the row in the file? Do I need to use php?
Html:
<table id="row">
<tr>
<td><a href=''>row1</a></td>
<td><a class='delete' href=''>Delete</a></td>
</tr>
<tr>
<td><a href=''>row2</a></td>
<td><a class='delete' href=''>Delete</a></td>
</tr>
<tr>
<td><a href=''>row3</a></td>
<td><a class='delete' href=''>Delete</a></td>
</tr>
</table>
Script:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$("#row .delete").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400, function(){
tr.remove().clone();
});
return false;
});
});
</script>
If this table is being created on a static HTML page then i dont know ways to delete the row and keep-ing it deleted after refresh (probably you should take a look at the usage of local objects storage).
If this table is being generated using data taken from e given database (data parsed using php) and rendered on page using html/css, then Yes, you should use PHP to delete the row even after the page refreshes.
The jquery code that you posted is only valid only until you reload the page, so when you reload page everything goes back to initial state since when you clicked that X button (delete button), you didnt actualy deleted anything ... you just made a row of the table hidden.
I am totally new to the handlebar.js so require help from expert to achieve my task.
I have a Html table which is already created through jsp.
Now how can i dynamically add new row to the table using handlebar.js?
Html structure
<table>
<tr>
<td class="one">one</td>
<td class="two">two</td>
<td class="three">three</td>
</tr>
<tr>
<td class="one">check</td>
<td class="two">checked</td>
<td class="three">checking</td>
</tr>
</table>
<form>
#input for first column
#input for second column
#input for third column
</form>
<div class="add">Add New Row</div> //on clicking add new row form gets open and there is save button to add new row
I'm sure this is 3 years, 8 months too late for Kunal, but perhaps someone will benefit.
#Palpatim is correct, a bit of jquery does the trick. I included the following in my handlebars view.
A button:
<button id="btnNewRow">Add New Row</button>
A script append a row to the table:
<script>
$(document).ready(function() {
$('#btnNewRow').on('click', function(evt) {
evt.preventDefault();
$("#approverTable").find('tbody')
.append($('<tr><td><input></td><td><input></td><td><input></td></tr>'))
});
});
</script>
And finally remember you need jquery loaded either from a local copy or via a Content Delivery Network (CDN), so add the following (which I do in my handlebars layout rather than my view).
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
I am working on visualforce pages. below is given the part of HTML file code that has been generated after executing the apex code.
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr></tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"> userName </td>
<td class="labelCol"></td> <td class="dataCol"></td>
</tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"></td>
<td class="labelCol"></td>
<td class="dataCol"></td>
</tr>
</table>
I want to remove the userName anchor tag from this page which is coded in line# 6 whose class Name is "dataCol col02", and there is another anchor tag with the same class name "dataCol col02" at line# 11. keep it in mind that this html is generated by executing an APEX code. Kindly guide me how could i remove the anchor tag at line#6 only..
You can use find, first and remove methods.
$('.dataCol.col02').first().find('a').remove();
In case that you want to remove the userName textNode:
$('.dataCol.col02').first().contents().filter(function () {
return this.nodeType === 3;
}).remove();
Removing all the contents:
$('.dataCol.col02').first().empty();
Use this
$(function(){
$(".dataCol.col02:first a").remove();
});
Demo
You could do something like:
var anchor = document.getElementsByClassName("col02")[0] //select first matching 'col02'
.getElementsByTagName("a")[0] //select first matching <a>
anchor.parentNode.remove(anchor)
You can see it running here: jsfiddle
This assumes of course you only ever want to remove from the first instance of something with class='col02', so is not hugely robust. I imagine the fact it's generated means you can't put in more helpful class/id attributes?
On the flipside unlike the other answers it doesn't depend on jquery : )
Try this -
$('td.dataCol.col02').eq(0).find('a').remove();
or if you would like to empty that td -
$('td.dataCol.col02').eq(0).empty();
$("table .dataCol.col02:first a").remove();
Try this:
$("tr:eq(1) > td:eq(1)").remove()
Do this >>
$(".col02:first > a").remove();
Example Fiddle
I have a 3x3 table of td's each with id's (id='a1'...id='c3'). I'd like to be able to click on any of the 9 td's and to alert the id of that td.
Here is my Coffeescript (in the asset pipeline)
$(document).ready ->
$("td").click ->
alert(#I would like to alert the id of whichever of the 9 td cell's have been clicked on)
Here's my index.html.erb
<table>
<tbody>
<tr>
<td id='a1'>A1</td>
<td id='b1'>B1</td>
<td id='c1'>C1</td>
</tr>
<tr>
<td id='a2'>A2</td>
<td id='b2'>B2</td>
<td id='c2'>C2</td>
</tr>
<tr>
<td id='a3'>A3</td>
<td id='b3'>B3</td>
<td id='c3'>C3</td>
</tr>
</tbody>
</table>
I'm horrible at JS so any help is appreciated!
$('td').click: (e)->
alert $(#).id
Same in CoffeeScript
Also, storing user data with html element is very easy with data-* attributes, for example:
<td data-id="42"></td>
And getting this id is easy with jQuery data method like follows:
var id = $('td').data('id');
First off, using jQuery on yields better performance than attaching a click handler to each td, especially if you have lots of tds:
$('table').on 'click', 'td', (event) ->
# event.currentTarget is the td which was clicked
alert event.currentTarget.id
event.currentTarget will be a DOM element object, and so every attribute will be available as a property of the object. The other answers referring to $(this).id are wrong, since $(this) (or $(event.currentTarget)) is a jQuery object, and as such attributes are available with the attr method: $(this).attr('id').