The last column of a table is intentionally clipped without scrollbars, by using
overflow: hidden;
on the Tables container.
If I enter the columns input field by pressing Tab, on MSIE it scrolls the focused column into the viewport. I would like to turn this feature off and make it similar to FF where it stays fixed.
Edit: I just recognized that FF is doing the same if the column is fully invisible, MSIE will do it even if the column is partially clipped.
Edit: Any javascript solution would be welcome. Something like 'preventdefault' but i have no idea on what event to hook.
#Container {
width: 400px;
overflow: hidden;
}
<div id="Container">
<table>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
</tr>
</tbody>
</table>
</div>
This is default behaviour of the browser to bring the input into view when focussing (actually when typing), as pointed out by #GyumFox.
What you can do is, either reset the scroll or disable the inputs that are out of bounds of your table, using Javascript.
Option 1: (Reset the scroll)
This will work fine in Chrome and Firefox but give you a flicker in IE.
Fiddle 1: http://jsfiddle.net/eg0ae5cg/1/
Snippet 1:
$("#Container").on("scroll", function() {
$(this).scrollLeft(0);
});
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Option 2: (Disable the out-of-bound inputs)
This is a crude example. You need to fine-tune this as required.
*Fiddle 2: http://jsfiddle.net/pkb2t127/1/ *
Snippet 2:
var $tab = $("#Container"),
$txt = $tab.find("input"),
w = $tab.width();
$txt.each(function() {
var lft = $(this).position().left,
rgt = lft + $(this).width();
if (rgt >= w) { $(this).prop("disabled", true); }
})
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Instead of disabled property, you could use the readonly property to keep the input value in the form post.
Related
I have one table, in which I want to add multiple inputs filed in the 3rd column of 1st row.
if I click on add pk1 button it's not get added into the specific td that is <td class=partition1> any solution using jQuery or Javascript? inputs must be added in the display:block mode not in inline mode.
which is the easiest way to handle this using Jquery or javascript?
$('.add-pkey1').on('click','.partition1' ,function(){
var t0 = $('.partition1').append('<input type="text" name="input1" value="test" />');
$('#table-id').append(t0);
})
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table
id="table-id"
>
<thead >
<tr>
<th colspan="6" class="text-center">
<span>Source : </span>
</th>
</tr>
<tr>
<th>input1</th>
<th>input2</th>
<th class="partition1">Partition1</th>
<th class="partition2">
Partition2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
id="input1"
type="text"
name="input1"
/>
</td>
<td>
<input
id="input2"
type="text"
name="input2"
/>
</td>
<td class="partition1">
<input
type="text"
name="partition"
/>
</td>
<td class="partition2">
<input
type="text"
name="partition2"
/>
</td>
</tr>
</tbody>
</table>
<button class="add-pkey1">add pk1</button>
JsFiddle : - https://jsfiddle.net/shreekantbatale2/zfus24m9/1/
As #Taplar said earlier there are multiple issues with your code, so I won't get into them one by one. But I will mention the notable ones.
.on() will accept an event, selector, data, and handler, but in your case you just need two of them so it should be .on('click', function(){}) instead of the current version.
In order to add an element to your third column, all you need to do is, get the element-specific class or id and append the desired element into it. But what did you do there will cause to append another <th> to your table so it means it will automatically add the new element to a new row and will break the table structure since there are 4 columns and you want to add <th> between column 3 and 4.
partition1 is not a unique class in your HTML so whenever you try to add something to it, it will add in two different places.
Here is a fix for you looking for:
$('.add-pkey1').on('click', function() {
$('.partition1.column3').append('<input type="text" name="input1" value="test" />');
})
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-id">
<thead>
<tr>
<th colspan="6" class="text-center">
<span>Source : </span>
</th>
</tr>
<tr>
<th>input1</th>
<th>input2</th>
<th class="partition1">Partition1</th>
<th class="partition2">
Partition2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="input1" type="text" name="input1" />
</td>
<td>
<input id="input2" type="text" name="input2" />
</td>
<td class="partition1 column3">
<input type="text" name="partition" />
</td>
<td class="partition2">
<input type="text" name="partition2" />
</td>
</tr>
</tbody>
</table>
<button class="add-pkey1">add pk1</button>
I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>
You need to specify style related to print .
You can use #media print to specify styles for print
In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.
I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for
I'm trying to find out event of scrolling tables.
I can get the left param, for example, using:
$("#scrollTable").offset().left
But I can't add the listener of its changing.
Everything I want is to monitor the changing of left scroll parameter of table and apply it to another DOM element (that is not a problem).
HTML example of my table:
<div class="scrollTableOuter">
<div id="scrollTableInner" class="scrollTableInner">
<table id="scrollTable" class="persist-area">
<thead>
<tr class="persist-header">
<th style="height: 80px;">Name</th>
<td style="width: 80px;">
</td>
<td style="width: 80px;">
</td>
</tr>
</thead>
<tbody>
<tr>
<th>name</th>
<td style="text-align: center;">
<input class="arrow-change" style="width: 35px; text-align: right;" autocomplete="off" min="0" name="AwardEvent[2][3][value]" id="AwardEvent_2_3_value" type="number" value="1">
</td>
</tr>
</tbody>
</table>
</div></div>
You should bind a listener to the 'scroll' event, as the docs point out.
$('#target').on('scroll', function() {
// your code
});
obviously, #target should be a selector for the element that houses the scrollbars, possibly document or a div you have on overflow
There is a table with 5 columns. Columns might have different width (I don't assign constant width).
Now I want to create 5 input elements just on top of the table. Is there any trick to make width of each input element equal to corresponding column width?
For instance, Input 1 should have the width of Column 1, Input 2 - the width of Column 2, etc.
So, how to bind inputs to columns?
UPDATE:
<script>
$('#addButton').click(function() {
$("#addContent").slideToggle("slow");
$('input').width(+$('table td').width()-1);
});
</script>
<div id = "add">
<div id = "addButton" title='New Record' ;>
<img src='images/add.png' alt='New Record' />
</div>
<div id = "addContent">
<input type="text">
<input type="text">
</div>
</div>
<table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
<thead>
<tr>
<th scope="col">Opr</th>
<th scope="col">Flt Num</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($result1 as $row):
$status=$row['status'];
$airlineName=$row['airlineName'];
$flightNum=$row['flightNum'];
?>
<tr id="<?php echo $flightNum; ?>" class="edit_tr">
<td width="80" ><?php echo $airlineName;?></td>
<td width="80" ><?php echo $flightNum;?></td>
<td width="80" id="<?php echo $flightNum; ?>" class="deact_but">
<div>
<img src='images/delete.png' alt='Deactivate' />
</div>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
CSS
input{
float: left;
margin: 0;
padding: 0;
}
It's possible with jQuery. Check the demo - http://jsfiddle.net/k9MhG/4/
Add some JavaScript (at the end or after the page loads) to get the offsetWidth of the top level cells and apply those widths to your inputs.
Something like this:
document.getElementById('myInput').style.width = document.getElementById('myTable').rows[0].cells[0].offsetWidth;
Or, extend your table to include the inputs and set the width to 100%. You can apply styles to the first TR to make it look like it's not really part of the table. The next TR can contain your headers with borders, etc.
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><br/><br/><br/></td>
</tr>
<tr>
<td>ContentContent</td>
<td>Content</td>
<td>Cont</td>
</tr>
</table>