I have read all the other articles and none seem to have helped.
The page in question is www.projectwhisper.net78.net
When the button is clicked, a row is added.
But if you look carefully, there is a flicker near the bottom of the table.
Here is the HTML of the page:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<p>Hi There!</p><button id="the_button">Click to add row</button>
<table id="content"><tbody></tbody>
</table>
<script type="text/javascript">
$("#the_button").click(function()
{
var row=$("<tr><td>This is a row</td></tr>");
row.hide()
row.prependTo('table > tbody');
row.slideDown(500);
});
</script>
</body>
</html>
DEMO
Try this
$("#the_button").click(function () {
var row = $("<tr><td>This is a row</td></tr>");
row.prependTo('table > tbody').hide();
row.show(500);
});
Each time the row is added to the top of the table tbody as a stack, since each element is prepended to the table tbody
Related
here is my code. i have a text. and a button for editing the text.i want to click the edit button then that time display a btn as name save . for saving the change that i have. what should i do? help me friends
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
<title>Untitled Document</title>
<script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
});
</script>
<style>
.editable{ background:#EAEAEA}
</style>
</head>
<body>
<div>Some text</div><br><br><button>Toggle editable</button>
</body>
</html>
Well you can just add one line code here:
DEMO
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
$(this).text('Save'); //Add this
})
UPDATE
UPDATED DEMO
To toggle it back just check for its text as below:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
if($(this).text()!="Save") //Add this condition
$(this).text('Save');
else
$(this).text('Toggle editable');
})
I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.
I have tried looking at
Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)
and
how to get selected table row values using jquery?
so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>X</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
tr {
margin:2px;
padding:10px;
display:block;
background:#EEE;
cursor:pointer;
}
tr:hover {
background:#BBB;
}
</style>
</head>
<body>
<script>
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
</script>
<table class="tbl">
<tr class=clickableRow href="http://www.zombo.com">
<td>2014</td>
<td>ACADIA</td>
<td>SLE-2</td>
</tr><tr class=clickableRow href='http://www.xkcd.com'>
<td>2014</td>
<td>ACADIA</td>
<td>Denali</td>
</tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
<td>2014</td>
<td>ACADIA</td>
....
(SNIP)
Thanks.
Use the Document.ready:
<script>
$(document).ready(function(){
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
});
</script>
Per this link returns a list of child nodes. In my testing this seems to ignore text nodes. Is this correct?
What seems baffling to me is that firstChild works but the children list is zero.
Tested in Firefox 20.0.1.
Here's my test code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title></title>
<script>
function checktable() {
var mytable = document.getElementById("mytable");
var cells = mytable.rows[0].cells;
for (var i = 0; i < cells.length; i++) {
console.log("firstChild.nodeValue:", cells[i].firstChild.nodeValue);
console.log("firstChild.data:",cells[i].firstChild.data);
console.log("children.length:",cells[i].children.length);
}
}
function checkdiv() {
var mydiv = document.getElementById("mydiv");
console.log("firstChild.nodeValue:", mydiv.firstChild.nodeValue);
console.log("firstChild.data:",mydiv.firstChild.data);
console.log("children.length:",mydiv.children.length);
}
</script>
<style>
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>Blob</td>
<td>Blab</td>
<td>Link</td>
</tr>
</table>
<div id="mydiv">
Blib
</div>
<button onclick="checktable()">Check table</button>
<button onclick="checkdiv()">Check div</button>
</body>
</html>
You want .childNodes, not .children.
The former is a method of Node and lists child nodes. The latter is a method of Element and consequently lists child elements, which is preferable in some situations.
I have a form that will have dynamic elements inserted with javascript and am experiencing some strange behavior. When I click the button to add another element to the table in the form, it adds the element but seems to to a form post immediately (without intending to submit the form yet)
I have created a simplified example of the page that has the same behavior. the first table element is created on page load and subsequent elements are added when clicking on the button. this form works successfully in IE. does anyone have an idea of how to prevent this behavior?
here is the code sample.
<!DOCTYPE html>
<html>
<head>
<title>Test Creating Form</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
td{font-family:verdana;}
</style>
<script type="text/javascript">
var counter = 0;
function makeTitle(title){
if(counter){
title += " " + counter;
}
counter++;
var tbl = document.getElementById('tbl');
var tr = tbl.insertRow(-1)
var td1 = tr.insertCell(-1);
td1.innerHTML = title;
}
function load1(){
makeTitle('Primary Specimen');
}
</script>
</head>
<body onload="load1();">
<form action="formtest.htm" method="post" name="testForm" id="testForm">
<table id="tbl" border="1"></table>
<button onclick="makeTitle('Alternate Specimen')" id="clone" >Add Another Specimen</button>
</form>
</body>
</html>
Button tags default to type="submit"; add type="button".
Cancel the click event with return false; or add type="button". A <button /> without a type-attribute is per default a submit-button.
<button type="button" onclick="makeTitle('Alternate Specimen')" id="clone" >Add Another Specimen</button>
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>