Using jQuery I have a button Hide Columns option. I want to add a button to each column head in the table. Having added by jQuery is preferred. The Button will hide it's respective column. It appears that the button when appended does not utilize the jQuery to hide column. I have copied and pieced different parts together. Please help me I don't really know this.
$(document).ready(function(){
$("#btn").click(function(){
$("th").append('<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
});
});
$(function() {
// on init
$(".table-hideable .hide-col").each(HideColumnIndex);
// on click
$('.hide-column').click(HideColumnIndex)
function HideColumnIndex() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
// get cell location - https://stackoverflow.com/a/4999018/1366033
var colIndex = $cell[0].cellIndex + 1;
// find and hide col index
$table.find("tbody tr, thead tr")
.children(":nth-child(" + colIndex + ")")
.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style></style>
</head>
<body>
<button id="btn">Hide Columns option</button>
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
x
</button>
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns">
<tr>
<th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>
I hope this is you want:
UPDATE:
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data("toggleclicked", 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
})(jQuery);
//NEW FUNCTION:
function addColumnsOption(view, className) {
if (view == 1) {
$("#myTable thead tr th").append(
"<button class='pull-right btn btn-sm btn-danger btn-condensed " +
className +
"'><i class='bi bi-trash3'></i></button>"
);
} else if (view == 0) {
$("#myTable thead tr th ." + className + "").remove();
}
}
$(document).ready(function () {
$("#btn").clickToggle(
function () {
addColumnsOption(1, "removeButton"); //1 for show
let theadThLength = $("#myTable thead th").length;
for (let i = 0; i < theadThLength; i++) {
$(".removeButton").eq(i).click(function () {
let tbodyTrLength = $("#myTable tbody tr").length;
for (let t = 0; t < tbodyTrLength; t++) {
$("#myTable tbody tr").eq(t).find("td").eq(i).hide();
$("#myTable thead th").eq(i).hide();
$(".footer-restore-columns").removeClass("d-none");
}
});
}
},
function () {
addColumnsOption(0, "removeButton"); //0 for hide
}
);
$(".restore-columns").click(function () {
$("#myTable tbody tr td").show();
$("#myTable thead th").show();
$(".footer-restore-columns").addClass("d-none");
});
});
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<button class="btn btn-sm btn-primary mb-2" id="btn">Show Columns option</button>
<table id="myTable" class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns d-none">
<tr>
<th colspan="4"><a class="restore-columns " href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
Goal: populate all fields in the 'nested' password protected page using Selenium python. The pages include Angular code. See screenshot 1. The nesting is within Section 1 - General as all the content therein comes from a different source than the rest of the page. Screenshot 2 shows that mouse-over the circular buttons 1, 2, or 3 displays a different URL in the footer than the address of the 'parent' page itself.
I've tried this code to find the Lease Acres and I get NoSuchElementException:
elm = browser.find_element_by_xpath("//input[#ng-model='section1.data.generalSection1.leaseInfo.leaseNumberLeaseAcres']")
Also, I run this:
browser.page_source
And it provides the 'parent' page HTML.
NB in Chrome, doing Save Page As... saves the 'parent' and associated .html files as well; one of those does have the HTML for the Lease Acres etc. (frame).
Parent Page
Mouse-over the 1,2, or 3 links
Here is the HTML of the 'parent' page (again, none of the HTML for the 'child' section (Lease Acres etc.) is herein):
<!-- saved from url=(0216)https://afmss.blm.gov/bizflow/portal/wih/basicwih.jsp?sid=0000001001&pid=49479&archive=n&wid=101&ro=n&openpage=page&bizcovecall=y&currow=0&bizcoveid=&wihMode=BASIC_NONE&wihnoactions=&caller=&cu=&tmpTime=1589467253908 -->
<html lang="en" class="x-border-box x-quirks"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="https://afmss.blm.gov/bizflow/favicon.ico" type="image/x-icon">
<title>Activity - Submit APD in APD Process</title>
<link href="./Activity - Submit APD in APD Process_files/commoncss.mres.1512659262000.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
li {clear:both !important}
</style>
<!--[if lt IE 9]>
<link href="/bizflow/themes/oceanblue/ielte8.css.1512659261000.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="./Activity - Submit APD in APD Process_files/discussion.css.1512659261000.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./Activity - Submit APD in APD Process_files/ext-all.css">
<link href="./Activity - Submit APD in APD Process_files/wih.css.1512659262000.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./Activity - Submit APD in APD Process_files/font-awesome.css">
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/ext-all.js.1512659306000.js.download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bfcommon-jsutil-stringutil-urlutil-modalwin-modalpopupclient-positionutil-customcommon-date.1512659289000.js.download"></script><script language="javascript">
var __bfcommonLoaded = true;
var __enableWebBrowserContextMenu = true;
</script>
<style type="text/css">
div.popupbody{}
</style>
<script language="javascript">var __modalWindowMode = true;var __modalWIHMode = true;var __modalMonitorMode = true;</script><style type="text/css">
#WINDOW_TITLE { display:none;}
</style>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.calendar.en.js.1589436531000.js.download"></script><script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.stringtable.en.js.1589436531000.js.download"></script><script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.wih.en.js.1589436531000.js.download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/hwmodal-webutil-jquery-1.7.2.min-jquery-ui-1.8.18.custom-jquery.blockUI-jquery.form-mustache.min-discussion-layoutstore-base64-basicwih-userinfo..download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/cookie.js.1512659284000.js.download"></script>
<script language="javascript">
<!--
function setApplicationAdditionalTitle(appid, name)
{
$("#appTitle"+appid, WIH_application.document).html(" " + name);
}
var currentAction = null;
function navigateUrlApp(action)
{
WIH_application.navigateUrlApp(action);
if ("undefined" != typeof(action)) {
currentAction = action;
}
}
function closeOEInitiateForm()
{
if(currentAction == "NewTaskFromMail")
{
navigateUrlApp("ViewMail");
}
}
function reloadApplication()
{
WIH_application.navigateUrlApp();
}
contextPath = "/bizflow";
processId = 49479;
workId = 101;
useAccessibility = false;
layoutStore = new LayoutStore({contextPath:contextPath});
try{
wihLayoutState = {supplementalTool: {isClosed:true}, instruction: {isClosed:true}, processMap: {isClosed:true}};
if(typeof(wihLayoutState) != 'object')
{
wihLayoutState = {supplementalTool: {isClosed:true}, instruction: {isClosed:true}, processMap: {isClosed:true}};
}
if(useAccessibility)
{
supplementalToolLayoutState().isClosed = false;
instructionLayoutState().isClosed = false;
}
displayStatus.instruction = !instructionLayoutState().isClosed;
displayStatus.supplementalTools = !supplementalToolLayoutState().isClosed;
}
catch(e)
{}
var enableOpenMultipleWIH = false;
var isArchivedProcess = false;
var activityInfo = 0;
var activityAuthority = 768;
var displayCloseMessage = false;
var openPageName = "page";
var bContinue;
var basicWihReadOnly = "n";
var imageBasePath = "/bizflow/themes/oceanblue";
var isNoneUI = true;
setContextRoot(contextPath);
setCookie('WIHSTYLE', "Basic", "MAX", '/');
function init()
{
bizcoveId = '';
Ext.require(['Ext.util.*']);
_readOnly = false;
_msgtype = "null";
setWIHOption("completionWindow", false);
setCurrentUserId("0000006305");
setWindowTitle("Activity - Submit APD in APD Process");
setLocalCacheKey("49479-13-101");
saveOpenTimestamp();
_readCommentRequired = false;
window.setTimeout(function(){sessionKeepAlive()}, SESSION_KEEP_ALIVE_TIME);
if(typeof(makeMenu) != 'undefined')
{
makeMenu();
}
wihDiscussion = new Discussion("table_commentList", "0000001001",
49479,
13,
101,
false,
"0000006305",
contextPath, imageBasePath,
{ME:"Me",
DISCUSSION_PREP_ON: bfMESSAGES.wih.DISCUSSION_PREP_ON,
TIP_MODIFY_COMMENT: bfMESSAGES.wih.TIP_MODIFY_COMMENT,
TIP_DELETE_COMMENT: bfMESSAGES.wih.TIP_DELETE_COMMENT,
MSG_PLEASE_WAIT: bfMESSAGES.wih.MSG_PLEASE_WAIT,
MSG_DISCUSSION_ENTER: bfMESSAGES.wih.MSG_DISCUSSION_ENTER,
MSG_WIH_CANNOT_MODIFY_DISCUSSION: bfMESSAGES.stringtable.MSG_WIH_CANNOT_MODIFY_DISCUSSION,
MSG_WIH_CANNOT_DELETE_DISCUSSION: bfMESSAGES.stringtable.MSG_WIH_CANNOT_DELETE_DISCUSSION,
MSG_ADDED_NEW_COMMENT: bfMESSAGES.wih.MSG_ADDED_NEW_COMMENT,
MSG_THERE_ARE_NEW_COMMENTS: bfMESSAGES.wih.MSG_THERE_ARE_NEW_COMMENTS,
FROM_PROCESS: bfMESSAGES.wih.FROM_PROCESS,
COMMENT_TYPE_REPLY: bfMESSAGES.wih.COMMENT_TYPE_REPLY,
COMMENT_TYPE_FORWARD: bfMESSAGES.wih.COMMENT_TYPE_FORWARD,
COMMENT_TYPE_COMPLETE: bfMESSAGES.wih.COMMENT_TYPE_COMPLETE},
{modify:true});
window.setTimeout(function(){
wihDiscussion.load();
}, 1);
window.setTimeout(function(){
$('#WIH_action').attr("src", contextPath + "/bizcoves/wih/action.jsp?basicWihReadOnly=" + basicWihReadOnly + "&currow=0&bizcoveid=&caller=&wihnoactions=&showActionButton=n&archive=n&processId="+processId + "&workId=" + workId);
$('#WIH_application').attr("src", contextPath + "/bizcoves/wih/applist.jsp?basicWihReadOnly=" + basicWihReadOnly + "&noAppBtn=true&processId="+processId + "&workId=" + workId);
}, 1);
}
function checkReadComment()
{
return false;
}
var openPageName = "page";
function ShowWindow(newURL, newName, strTitle, width, height, scroll)
{
var obj = top;
var l = screen.width/2 - width/2;
var t = screen.height/2 - height/2;
var win = window.open(newURL, newName, "left="+l+",top="+t+",width="+width+",height="+height + ",scrollbars=" + scroll );
return win;
}
function ShowWindowWithObject(newURL, newName, strTitle, width, height, scroll, objectName)
{
return ShowWindow(newURL, newName, strTitle, width, height, scroll);
}
//-->
</script>
<script type="text/javascript">
try{
// $(window).unload(window_onbeforeunload);
$(window).bind("beforeunload", window_onbeforeunload);
// window.attachEvent("onbeforeunload", window_onbeforeunload);
// window.attachEvent("onunload", window_onbeforeunload);
} catch(e){};
$(window).resize(function(){if(isModalWindowMode()){modalWindowOnResize()}});
function getAttachmentAccordionTitle()
{
var accordionTitle = "<div style='float:left;' >"+ bfMESSAGES.wih.ATTACHMENT + " </div>";
return accordionTitle;
}
function getInternalDiscussionAccordionTitle() {
var accordionTitle = "<div style='float:left;' >"+bfMESSAGES.wih.DISCUSSION+" </div>";
accordionTitle += '<div style="float:right"><button title="' + bfMESSAGES.wih.ADD_NEW_DISCUSSION + '" class="accordionNewColorButton" id="btnAddDiscussion" onclick="return addNewDiscussion(event)" >' + bfMESSAGES.wih.ADD_NEW_DISCUSSION + '</button>' +
'<button title="Refresh" class="accordionRefreshButton" id="btnRefreshDiscussion" onclick="reloadDiscussion({event:event});"><i class="fa fa-refresh"></i></button></div>';
return accordionTitle;
}
function addNewDiscussion(event) {
var ret = openDiscussionPopup({"processId": "", "mode": "New", "commID": ""}, processId, workId);
try {event.stopPropagation();} catch(e){};
return false;
}
function addTab() {
WIH_application.addTab("New Correspondence", "http://www.bizflow.com");
return false;
}
function openNewCorrespondence(event) {
openPopup(contextPath + "/correspondence/newCorrespondence_step1.jsp?&processId="+processId + "&workId=" + workId, bfMESSAGES.wih.NEW_CORRESPONDENCE, "newCorrespondence", 1000, 800);
try {event.stopPropagation();} catch(e){};
return false;
}
function getCorrespondenceAccordionTitle() {
var attachmentTitle = "<div style='float:left;' >"+bfMESSAGES.wih.CORRESPONDENCE+" </div>";
attachmentTitle += "<div style='float:left;display:none' class='countButton' id='lengthOfCorrespondence'>0</div>";
attachmentTitle += '<div style="float:right"><button title="' + bfMESSAGES.wih.ADD_NEW_CORRESPONDENCE + '" class="accordionNewColorButton" id="btnAddCorrespondence" onclick="return openNewCorrespondence(event);" >' + bfMESSAGES.wih.ADD_NEW_CORRESPONDENCE + '</button>' +
'<button title="Refresh" class="accordionRefreshButton" id="btnRefreshCorrespondence" onclick="reloadCorrespondence({event:event});"><i class="fa fa-refresh"></i></button></div>';
return attachmentTitle;
}
function setCorrespondenceLength(length) {
$("#lengthOfCorrespondence").html(length);
if(0 == length) {
$("#lengthOfCorrespondence").hide();
} else {
$("#lengthOfCorrespondence").show();
}
}
</script></head>
<body style="margin:0; border:0;background-color:lightgray;" class="x-body x-webkit x-chrome x-reset" id="ext-gen1018">
<div id="notify"></div>
<script>
$(document).ready(function(){
init();
});
</script>
<div class="wih-toolbar-buttons" style="overflow:hidden;display:none;height:0px;" id="menubar">
<div id="menuToolbar" style="width:100%"></div>
<iframe id="WIH_action" name="WIH_action" title="Action frame" style="display:none" src="./Activity - Submit APD in APD Process_files/action.html" width="1px" height="1px"></iframe>
</div>
<div id="divApplicationTab" style="display: none; height: 18px;">
<iframe id="WIH_application" name="WIH_application" title="Application frame" style="display: none; height: 18px;" src="./Activity - Submit APD in APD Process_files/applist.html" width="100%" height="25px" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0" noresize="" scrolling="no"></iframe>
</div>
<iframe id="WIH_information" name="WIH_information" title="Information frame" src="./Activity - Submit APD in APD Process_files/saved_resource.html" width="100%" height="100%" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe>
<div id="appListBox2" class="appListBoxOuter" style="display: none;"></div>
<form id="ajaxForm"></form>
<div class="wih-supplemental-tools wih-supplemental-tools-panel" id="wihSupplementalTools" style="display:none">
<div class="accordion_menu" style="overflow: hidden;height:100%" id="wihAttachments">
<button style="margin-top: 10px;margin-left: 10px" class="colorButton" title="Add new" onclick="openAddAttachmentWin()">Add new</button>
<div class="content-west accordion_menu" style="height:100%">
<div class="wih-attachments" id="WIH_attachment">
<div class="loaderIcon">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
</div>
<span class="not-enabled-attachment">Attachments are not supported for this activity.</span>
...
LINES CUT TO REDUCE LENGTH
...
<link href="./Activity - Submit APD in APD Process_files/dhtmlwindow.css.1512659262000.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/dhtmlwindow.js.1512659288000.js.download" bridgetranslation="no"></script><div id="dhtmlwindowholder"><span style="display:none">.</span></div>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bfcommon-jsutil-stringutil-urlutil-modalwin-modalpopupclient-positionutil-customcommon-date.1512659289000.js.download"></script>
<script type="text/javascript" bridgetranslation="no" src="./Activity - Submit APD in APD Process_files/modalpopup-modalpopupapi-urlutil.1512659289000.js.download"></script>
<script type="text/javascript" bridgetranslation="no">
// set bridgetranslation to no for Bizflow Bridge not to change URL.
// bug18547: All dialog in Outlook open with HTTP 500 error
// in case of plumtree, plumtree does not handle a code to load a url in a js so make a exposed function on jsp and call it
function loadFrameURL(obj, url)
{
var loaded = false;
var __bizcoveId = getUrlValue(url, "__bizcoveId");
if(null != __bizcoveId && __bizcoveId.length > 0)
{
var func = eval("typeof(loadFrameURL" + __bizcoveId + ")");
if("undefined" != func)
{
func = eval("loadFrameURL" + __bizcoveId);
func(obj, url);
loaded = true;
}
}
if(loaded == false)
{
obj.src = url;
}
}
</script>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax0Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax0" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax0TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax0Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax0SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell0">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder0"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax0CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax0Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax0Frame" class="bizCoveModalContentArea" title="modalPopupMax0Frame" name="modalPopupMax0Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(1).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax1Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax1" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax1TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax1Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax1SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell1">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder1"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax1CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax1Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax1Frame" class="bizCoveModalContentArea" title="modalPopupMax1Frame" name="modalPopupMax1Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(2).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
...
2 3 4 and 5 OMITTED
...
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax6Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax6" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax6TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax6Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax6SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell6">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder6"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax6CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax6Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax6Frame" class="bizCoveModalContentArea" title="modalPopupMax6Frame" name="modalPopupMax6Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(7).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<!--
Do not delete this dummy form. this form is to get the url of blank html page for portal bridge
//-->
<form action="https://afmss.blm.gov/bizflow/includes/modalpopup/blank.jsp" name="blankform">
</form>
<script type="text/javascript">
var __basePath = "/bizflow";
var __currentModalIndex = -1;
var maxModalCount = 7;
var maxModalIndex = maxModalCount - 1;
var _browser = "NS";
</script>
<script type="text/javascript">
useLayoutFramework = false;
function getWIHActionFrame() {
return this.frames["WIH_action"];
}
</script>
<input type="hidden" name="_orgContextInfoData" id="_orgContextInfoData" value="...">
</body></html>
This was a matter of switching to the right frame. From FAQs
Q: How do I type into a contentEditable iframe?
A: Assuming that the iframe is named "foo":
driver.switchTo().frame("foo");
WebElement editable = driver.switchTo().activeElement();
editable.sendKeys("Your text here");
I've this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testPage</title>
<style>
table td {
width: 50%;
}
</style>
</head>
<body>
<div id="titlebar">
<center>
Select option:
<select onchange="onSelect.call(this, event)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<script>
function onSelect(event) {
switch (this.options[this.selectedIndex].text) {
case "One":
var td = document.getElementById("one");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("two");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
case "Two":
var td = document.getElementById("two");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("one");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
}
}
</script>
</center>
</div>
<div id="images">
<table width="100%" height="100%" border=1 cellpadding=1>
<!-- first row -->
<tr id="row1">
<td id="xxx">
<div id="xxx_div" style="width:100%;height:370px"></div>
</td>
<td id="yyy">
<div id="one" style="width:100%;height:370px"></div>
</td>
</tr>
<!-- second row -->
<tr id="row2">
<td id="zzz">
<div id="zzz_div" style="width:100%;height:370px"></div>
</td>
<td id="kkk">
<div id="two" style="width:100%;height:370px"></div>
</td>
</tr>
</table>
</div>
<div id="bottom">
Bottom ...
</div>
</body>
</html>
that works fine, but if I rescale my browser page you can see that scrollbars appears (I know, I'm using absolute values for div height and the problem probably is about this, but it's only to show the problem ... ).
I'd like to obtain the same behaviour at this site
http://tools.geofabrik.de/mc/
where you can see that if you rescale the browser scale, no scrollbars appears and the maps (so the tables and its contents ... ), rescale ...
Suggestions / examples?
This is what you're looking for:
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 100vw;
height: 100vh;
}
td {
width: 50%;
height: 50%;
background: red;
}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Of course, you might adapt your table size if you need to add inputs or text outside.
Just consider always occupying a total 100% of the visible area.
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
i have found lots of articles pertaining to auto-resizing rows and columns such as the CSS codes below:
textarea[readonly="readonly"], textarea[readonly] { background-color:white; }
float colWidth = [[[tableView tableColumns] objectAtIndex:1]width];
NSString *content = [[[tempArray objectAtIndex:row] objectForKey:#"tValue"] string];
float textWidth = [content sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[NSFont fontWithName:#"Lucida Grande" size:15],NSFontAttributeName ,nil]].width;
float newHeight = ceil(textWidth/colWidth);
newHeight = (newHeight * 17) + 13;
if(newHeight < 47){
return 47;
}
return newHeight;
table {
width: 700px;
}
and
table tr td {
width: 350px;
height: auto;
}
But nothing seems to work with my code
Here is my table code and I want it to auto-resize based on the data that will be fetch from the database:
$myRes = "<form action='' method='post'>
<fieldset style='width: 10px'>
<legend align='left'><strong>Results</strong></legend>
<p>
<table width='auto' border='1' cellspacing='1' cellpadding='1' align='center'>
<tr>
<th align='center' scope='row'>A</th>
<td><textarea class=readonly name=testA id=testA cols=65 rows=3>" . $result['testA'] . "</textarea></td>
</tr>
<tr>
<th scope='row'>B</th>
<td><textarea class=readonly name=testB id=testB cols=65 rows=3>" . $result['testB'] . "</textarea></td>
</tr>
</table>
</p>
</fieldset>
</form>";
try following :
$("textarea").height( $("textarea")[0].scrollHeight );
or
window.setTimeout( function() {
$("textarea").height( $("textarea")[0].scrollHeight );
}, 1);