I need some help from the experts here on this site.
What I would like to accomplish is, at the click of a button is to copy the existing table ('data'), open a new popup window and use the document.write to write the table from the previous page onto the new one.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
</head>
<body>
<table id="data" border="1" cellspacing="1" width="100" id="table1">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Colors</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Apples</td>
<td>Carrots</td>
<td>red</td>
<td>10</td>
<td>0.99</td>
</tr>
<tr>
<td>Pears</td>
<td>Celery</td>
<td>blue</td>
<td>24</td>
<td>1.00</td>
</tr>
<tr>
<td>Mangos</td>
<td>Broccoli</td>
<td>green</td>
<td>12</td>
<td>1.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>Cauliflower</td>
<td>purple</td>
<td>48</td>
<td>1.25</td>
</tr>
</table>
<br>
<input type="button" value="test it" />
</body>
</html>
Here is a working example.
The button needs a click handler:
<input type="button" value="Open popup" onclick="openPopup();" />
The click handler function:
function openPopup() {
var popup = window.open("", "", "width=640,height=480,resizeable,scrollbars"),
table = document.getElementById("data");
popup.document.write(table.outerHTML);
popup.document.close();
if (window.focus)
popup.focus();
}
Add onclick function for your button first:
<input type="button" value="test it" onclick="openWin()" />
In script:
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write(document.getElementById('data').outerHTML);
myWindow.focus();
}
Thats it.
I am not sure outerHTML property compatibility across browsers. Please check once.
Related
I have a table and each row has an icon. When you click on the icon, it should show another icon that was hidden. My problem is that when I click on this icon, it always changes the first row, not the row of the icon that I have clicked.
This is my function:
$("#myTable").on('click', 'tbody tr #editAction', function () {
$('#deleteAction').show();
$('#editAction').hide();
});
The attribute id must be unique in a document, you can use class instead. You also have to target the current element with this keyword.
Demo:
$("#myTable").on('click', 'tbody tr .editAction', function () {
$(this).closest('.deleteAction').show();
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td class="deleteAction">delete</td>
<td class="editAction">edit</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="deleteAction">delete</td>
<td class="editAction">edit</td>
</tr>
</tbody>
</table>
$('#deleteAction') results in a global search in the DOM that returns the first element that matches the id, ensure each id in the DOM is unique.
Try to implement class selector as following
$("#myTable").on('click', 'tbody tr .editAction', function (e) {
$(e.currentTarget).find('.deleteAction').show();
$(e.currentTarget).find('.editAction').hide();
});
As others have mentioned, $('#deleteAction') will return the first element that matches that id. Instead of using IDs, you should use classes. Classes can be used more than once on a page, whereas IDs should not be.
The code below will hide the clicked .editAction, then show the .deleteAction from the same row.
$("#myTable").on('click', 'tbody tr .editAction', function () {
$(this).hide().closest("tr").find(".deleteAction").show();
});
HTML wise, you will need to replace id="#editAction" with class="editAction":
<tr>
<td><img class="editAction"></td>
<td><img class="deleteAction"></td>
</tr>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<tr>
<td>test1</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
<tr>
<td>test2</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
<tr>
<td>test3</td>
<td>
<button class="deleteAction">delete</button>
<br>
<button class="editAction">edit</button>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).on('click', '.editAction', function () {
var cur = $(this);
cur.parent().find('.editAction').hide();
cur.parent().find('.deleteAction').show();
});
</script>
</body>
</html>
how can I add a new row in a table? using Aurelia.js without use jquery.
will be possible do this just with Aurelia.js ?
export class App {
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<table>
<tr>
<td>
elem 1
</td>
<td> elem 2</td>
<td> elem 3</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-info">Add</button>
</td>
</tr>
</table>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
As the thebluefox said, you're far way from having something working. You should read the docs and learn some basics.
Anyway, the answer you're looking for is:
<tr repeat.for="item of items">
<td>${item.property1}</td>
<td>${item.property2}</td>
<td>${item.property3}</td>
<td>${item.property4}</td>
</tr>
Now, every time you push an object into items, a new line in the table will be created.
Hope this helps!
I want to make a form for my office, where users can fill the form
without manually typing.
Just search from the popup browser, and find their data and automatically set in fields.
This is form display,
when we click the blue file icon to open new popup window
And this is new popup window, search display.
When we click button 'pilih' i want ('nik, nama_karyawan, departemen, jabatan')
to automatically set in form display.
What you need is to send parameters to opener window. You can do it easily by using window.opener Below is the sample code that works fine for me:
In parent window:
<script>
$(document).ready(function(){
$('.btnOpenPopup').click(function(){
window.open("popup.html", "userList", "width=200, height=100");
});
});
</script>
<form name="test">
<label>Name: </label>
<input type="text" name="firstname" id="firstname" />
Open
<br /><br />
<label>Last name:</label>
<input type="text" name="lastname" id="lastname" />
</form>
In popup window:
<script>
$(document).ready(function(){
$('table tr').click(function(){
firstName = $(this).find('td:eq(1)').text();
lastName = $(this).find('td:eq(2)').text();
window.opener.$('input[name="firstname"]').val(firstName);
window.opener.$('input[name="lastname"]').val(lastName);
window.close();
});
});
</script>
<table width="80%">
<tr>
<td>ID</td>
<td>Name</td>
<td>Last name</td>
</tr>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Something</td>
</tr>
<tr>
<td>8</td>
<td>Albert</td>
<td>Potter</td>
</tr>
<tr>
<td>9</td>
<td>Melis</td>
<td>Some Last Name</td>
</tr>
</tbody>
</table>
Problem:
http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button,
the third row's deny button can't click just in IE 11.
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem.
This is source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main table{ border-collapse:collapse; width:100%; }
#main td{ border:1px solid #EEA; padding:4px 6px; }
#main table tr.excepted td{ background:#F99; }
form table {background:#FEFEF1}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body >
<div id="base">
<div id="main">
<form accept-charset="UTF-8" action="" method="post">
<input id="product_ids" name="product_ids" type="hidden">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1084">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1084" style="display: none;">
<input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked('d_1084')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1085">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1085" style="display: none;">
<input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked('d_1085')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1090">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1090" style="display: none;">
<input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked('d_1090')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div>
</form>
<script type="text/javascript">
var $j = jQuery;
function onDenyBtnClicked(adId) {
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j("#product_ids").val(adId);
}
// -->
</script>
</div>
</div>
</body>
</html>
I solved this problem by adjust javascript code order,like this
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
↓
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j('#a_tr1_'+adId).addClass('excepted');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }
delete td border style
#main td{ border:1px solid #EEA; padding:4px 6px; }
delete td background style
#main table tr.excepted td{ background:#F99; }
delete table backgroud style
form table {background:#FEFEF1}
delete submit button
delete javascript code that add 'excepted' css to tr
$j('#a_tr1_'+adId).addClass('excepted');
delete javascript code that show allow button and hide deny button
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
delete javascript code that set value to 'product_ids'
$j("#product_ids").val(adId);
delete first colspan attribute on per row
delete first rowspan attribute on per row
delete second colspan attribute on per row
I'm quite puzzled and really don't get what is causing the problem. I'm hoping someone can help me, thank you.
This is an odd issue for sure. It appears to be a bad painting issue in IE 11 that prevents interacting with the page.
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again.
Applying some best-practices to your code coincidentally fixes this issue as well. If you are using jQuery - you should not be using inline onclick attributes. A main goal of jQuery is to separate behavior from content. A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button.
New JS:
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS:
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update:
<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" />
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer.
<A ID ="CustomerInformation"></A>
<table class="SectionHeader1">
<TBODY>
<tr>
<td>Customer Information</td>
</tr>
</TBODY>
</table>
<TABLE class="TheBox" align="center">
<TBODY>
<TR>
<TD>
<FIELDSET><LEGEND>Customer Address</LEGEND>
<DIV align="center">
<TABLE id="table5" class="BoxedIn">
<TBODY>
<TR>
<TH colspan="3" width="50%">Billing Address</TH>
<TH colspan="5" width="50%">Shipping Address</TH>
</TR>
</TR>
</TBODY>
</TABLE>
</DIV>
</FIELDSET>
</TD>
</TR>
</TBODY>
</TABLE>
<INPUT type="button" value="Customer Details"
class="buttonSuper" name="customerDetails"
onclick="parent.location='#CustomerInformation'">
The '#CustomerInformation' denotes the point where this script will jump to means same page.But it working fine in IE but not not working firefox and Chrome ..when click on onclcik button it is closing current page and go to main page.I tired like document.location and but no luck... Please help
How about window.location instead?
<INPUT type="button" value="Customer Details" class="buttonSuper" name="customerDetails" onclick="location.href='#CustomInformation';">
This does what you're trying to do.
Edit: using location.href