I have a table with the following structure
<table id='table1'>
<tbody>
<tr id='rowa'>
<td><select>....</select></td>
<tr>
...
<tr id='rowx'>
<td>....</td>
</tr>
...
<tr id='rowz'>
</tr>
</tbody>
</table>
What I want to do is on clicking of a button, I want to copy the rowa and insert it before rowx.
What I am currently doing is
<script type='text/javascript'>
function copyRow() {
var row = $('#rowa').clone();
$('#rowx').before(row);
}
</script>
It seems to show the newly constructed row before the rowx but when I try to access that new row, it does not work. what I mean by does not work in that the select input item does not behave like a select item, it behaves like the static text.
elsewhere on the page I have
<a href='javascript:copyRow()'><img src='images/copyrow.png' title='Copy Row' /></a>
Sorry! I should have made it clear that the copyRow is being called when the user clicks on a link somewhere else on the page.
Check this http://jsbin.com/owivin/1/.
JS:
$(document).ready(function(){
$("#rowx").before($("#rowa").clone());
});
Your code's not working because you never call copyRow(). I put it in the document.ready() so that it would run as the document gets ready!
Related
I have 2 add button. First add button on header, click this button will add 1 new row. Second add button in table (such as image on my post), click this button will add new row such as image my post. I want add row in table such as below image, but i haven't thought of a solution yet. Hope to be got your helps!
View Image Here
The insertRow() method allows you to add rows to a <table> and returns a reference to a new row. Adding that to an onClick() function should be easy! :)
Here's the relevant information on Mozilla's site .
To solve this, you have to add a new table inside td, like this
function addNewRow() {
let table = document.getElementById("add");
table.innerHTML += '<table><tr><td><b>This is a test</b></td></tr></table>';
}
<html>
<body>
<button onclick="addNewRow()">Add</button>
<table id='my-table'>
<tr>
<td>This is one td</td>
<td id='add'>This is another td</td>
</tr>
</table>
</body>
</html>
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 have a table with rows, that when clicked, take the user to a page with more detailed information about the item that row was describing. Unfortunately, it always changes the current page, and our users would like to be able to middle-mouse/control click the rows in order to open a new tab if they want to. This choice is available with normal links, but not with my onclick it seems. An example is shown below:
<html>
<body>
<table border='1'>
<tr onclick='window.open("http://www.google.com")'>
<td>Open Another Window</td>
</tr>
<tr onclick='location.href="http://www.google.com"'>
<td>Change Current Page</td>
</tr>
</table>
</body>
</html>
What is the best way to simulate a normal link with an onclick event so the behaviour will be the same across different os/browsers, which I believe have different bindings for what triggers opening a link in a new tab.
This works for me:
<tr onclick="window.open('http://www.google.com','_blank')">
I just stumbled across this question because I was also looking for a solution. Here is a possible solution. It opens the page normally when clicked normally and in a new tab if the middle button is used.
You can add a table class (like clickable-rows) to easily apply this behavior to your tables. Then add a data attribute (like data-href) with the link.
<!DOCTYPE html>
<html>
<body>
<table>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 1</td>
</tr>
<tr data-href="http://www.google.com">
<td>Non clickable row</td>
</tr>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 2</td>
</tr>
</table>
<script>
// loop through the table rows with the clickable-row class, and turn them into clickable rows by
// setting the cursor to a pointer, and adding a mousedown listener to open in the current page
// if left-clicked, or open in a new tab if middle-clicked
let rows = document.querySelectorAll("tr.clickable-row");
rows.forEach((clickableRow) => {
clickableRow.style.cursor = "pointer";
clickableRow.addEventListener("mousedown", function(e) {
e.preventDefault();
var href = this.getAttribute('data-href');
if (e.button === 1)
{
window.open(href, "_blank");
}
else if (e.button === 0)
{
window.location = href;
}
})
});
</script>
</body>
</html>
Instead of handling the click event of the table row, use an anchor tag. The default behaviour for Ctrl+click for anchors is to open the URL in the href attribute in a new window or tab. If you want a new tab or window opened without the Ctrl button, you can use the target attribute of the anchor as well.
<td>open another window or tab</td>
<tr onclick="window.open('./putyourlink.php')"> it's still work to me also but pls put '_blank' like another answer it's good more </tr>