Bind input width to table column width - javascript

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>

Related

Default value for blank fields

Appreciate if you could help.
I had populated the data from a form into a dialog box when users click on the 'submit'. However, I would like to populate and change the default value to "NIL" for empty fields. The following is my codes for populating the data:
jQuery('#lblCustNameBs').html(jQuery('#custNameBs').val())
jQuery('#lblembossingNameBs').html(jQuery('#embossingNameBs').val())
jQuery('#lblCustMobileBs').html(jQuery('#custMobileBs').val())
The code for the table are as follow:
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id ='lblTitleBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id ='lblCustNameBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id ='lblembossingNameBs' />
</tr>
Thanks in advance :)
You can use the || operator to coalesce a null/undefined value to whatever you require.
Also note tat td cells are not self closing so you should use <td></td> instead of <td />. The use of both inline styles and !important should ideally be avoided too.
jQuery(function($) {
$('#lblCustNameBs').html($('#custNameBs').val() || 'NIL');
$('#lblembossingNameBs').html($('#embossingNameBs').val() || 'NIL');
$('#lblCustMobileBs').html($('#custMobileBs').val() || 'NIL');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id="lblTitleBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id="lblCustNameBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id="lblembossingNameBs"></td>
</tr>
</table>

How to change the visibility of a table row in Javascript?

I am trying to show/hide rows in a HTML table by javascript. Checking the check box shall show the additional rows, unchecking it shall hide them.
<html><body><form><table>
<tr>
<td> This row is always visible. </td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="for(e in document.getElementsByClassName('switchMe')) e.style.display = document.getElementById('cbox').checked ? 'block' : 'none';"/>
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row will be shown after the user clicks the check box. </td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row too. </td>
</tr>
<tr>
<td> This row is always visible. </td>
</tr>
</table></form></body></html>
However, nothing happens, and I get an e.style is undefined error in the console. How do I access the style attribute of the <tr> element correctly?
(I first tried putting the rows in question in a <div>. That doesn’t give any error, but the rows are always visible, and the <div> is absent in Firebug, so it is probably not allowed there.)
First, for..in is ideal for iterating over objects but not on NodeList.
Second, its a bad practice to have change event listener in html. Anyone can change markup using dev tools and manipulate behaviour of your system. You should use .addEventListener
Third, defining a variable without var will make it global.
Output of for..in
var el_list = document.querySelectorAll('.switchMe');
for(var el in el_list){
console.log(el)
}
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
Sample
JSFiddle
document.querySelector('#cbox').addEventListener('click', function(e) {
var switchEl = document.querySelectorAll('.switchMe');
for (var i = 0; i < switchEl.length; i++)
switchEl[i].style.display = this.checked ? 'block' : 'none';
});
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
You are having an issue with the use of the for...in loop. This isn't really the loop that you should choose for an Array or an (Array like) object, they should only be used for iterating through object keys and properties as they are very slow on array's where there are much faster methods available.
for...in also modifies state so you should have that available eg.
const thing = { one: 1, two: 2 }
for (key in thing) {
console.log(thing[key])
}
You are referencing the thing from the outer scope inside the loop
I Think this is a better way as you are not dealing with any external state when you do your iteration.
const rows = Array.from(document.getElementsByClassName('switchMe'))
const cbox = document.getElementById('cbox')
function changeHandler() {
rows.forEach(row => {
row.style.display = cbox.checked ? 'block' : 'none'
})
}
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="changeHandler()" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>
One way to implement what you were trying to do without creating a function as the other answers did would be to do it as shown below.
However this doesn't mean you should do it this way. In practice definitely use the other answers shown.
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="var arr = document.getElementsByClassName('switchMe'); for(var i = 0; i < arr.length; i++) arr[i].style.display = document.getElementById('cbox').checked ? 'block' : 'none';" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>

Convert table to html and group in to divs

update: almost done! problem is that the productrow im trying to grouop gets divided into two groups: https://jsfiddle.net/g3zrh5y5/1/
I have a HTML table that I would like to convert and group to divs. I have dont his succesfully with tableanarchy.js (http://codepen.io/KurtWM/pen/AJpEw) on another table on my site, but on this table the setup is a bit different and I cant make it to work.
I need to remove the divider table row, and group the rest in divs as the example shows. Any idea how I do this?
<tbody>
<tr>
<td class="unfoldedlabel" colspan="6"><a href="javascript://" name=
"_ec_pd6_cc/cL" id="_ec_pd6_cc/cL" onclick=
"if( UI.pb_boolean(this, 'click') ) {} return false;">Backup/datalagring/Raid
Controllers</a></td>
</tr>
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (1GB)</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534562-B21</td>
<td>HP</td>
<td>0</td>
<td>4 127,97SEK</td>
<td><input type="button" id="rpb13804" class="actionbutton" value="KÖP NU"
onclick="buy(this, 13804, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
//remove this ---->
<tr>
<td class="divider" colspan="6"></td>
</tr>
//end remove ---->
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs/9248a5f8-1a45-40c1-b254-52ab24881150/40/40" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (512MB) - for ProLiant
BL460c G7, BL620C G7, BL680c G7, DL165 G7, DL360 G7, DL370 G6, DL980 G7, ML110
G7</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534916-B21</td>
<td>HP</td>
<td>0</td>
<td>3 260,99SEK</td>
<td><input type="button" id="rpb28314" class="actionbutton" value="KÖP NU"
onclick="buy(this, 28314, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
</tbody>
Just iterate the table rows and exclude the rows you don't need. Here is a working fiddle
$(document).ready(function(){
$('.group-btn').click(function(){
// Lets create the main div
var div = $('<div />', {id: '#myDiv', class: 'new-div'});
// Let's start iterating the body rows
$('.myTable tbody tr').each(function(index, row) {
// Exclude divider rows
if(!$(row).hasClass('divider')) {
// Let's iterate the columns of the row
$(row).find('td').each(function(index, column){
// This is a simple example that extract the column text that's why i create a simple <p> tag
// Let's exclude tds that have "exclude" class
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
});
}
});
// And finally we append the div to the "append-here" div
$('.append-here').append(div)
});
});
table {
border: 1px solid black
}
table tr td{
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="group-btn">Click me!</button>
<table class="myTable">
<thead>
<tr>
<th>col 1-1</th>
<th>col 2-1</th>
<th>col 3-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1-2</td>
<td class="exclude">Val 2-2</td>
<td>Val 3-2</td>
</tr>
<tr>
<td>Val 1-3</td>
<td>Val 2-3</td>
<td class="exclude">Val 3-3</td>
</tr>
<tr class="divider">
<td colspan="3">DIVIDER</td>
</tr>
<tr>
<td>Val 1-5</td>
<td>Val 2-5</td>
<td>Val 3-5</td>
</tr>
</tbody>
</table>
<div class="append-here">
<p>Here is where you append the divs</p>
</div>
I've made a little change: the "divider" class is in the tr and not in the td
* UPDATE *
I've added this line of code
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
That permits you to check whatever class you need to check in order to include/exclude tds elements

Make current HTML row editable

In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.

Find previous div of a specific class with Jquery

I use jquery and I want to find the previous div which has the "error" class
My html code :
<table class="questions">
<tr>
<td class="heading">1
<div class="error"></div>
</td>
<td colspan="4">
<textarea class="textcontrol required" name='questionT136'>
</textarea>
</td>
</tr>
<tr>
<td></td>
<th><label for="reponse137-3">Très satisfaisant</label></th>
<th><label for="reponse137-4">Satisfaisant</label></th>
<th><label for="reponse137-5">Insatisfaisant</label></th>
</tr>
<tr class="q">
<td class="heading">
2
<div class="error"></div>
</td>
<td class="questionradio"><input class="required" id='reponse137-3'
name='questionN137' type='radio' value='3'></td>
<td class="questionradio"><input class="required" id='reponse137-4'
name='questionN137' type='radio' value='4'></td>
</tr>
</table>
For example, from reponse137-3, I'd like to change the value the previous class="error". I allready tryied to access to that object with :
$('#reponse137-3').prev(".error")
but it doesn't work. I think because it hasn't the same parent, so I tryied :
$('#reponse137-3').prev("tr").next(".error")
How can I do ?
Assuming your .error div is always in the same table row:
$('#reponse137-3').closest('tr').find('.error:first');
http://jsfiddle.net/vkfF8/
You need to go up three times to arrive to table, and later find error
$('#reponse137-3').parent().parent().parent().find('.error');
First parent go to th, second to tr and thirth to table, then find within table what element has class named .error And you will get it

Categories