how to focus a custom cell in table? - javascript

I have a table and rowSelected,I want when user focusout on 4th td the 6th td get focus instead of td 5.
var rowindex=$("#mycustomizedtable).attr('rowselected);
var row=$("#mycustomizedtable tbody).find('tr')[rowindex];
var tds=$(row).find('td');
var colselected=$("#mycustomizedtable).attr('colselected');
console.log(colselected);
for example : I get result '4' in console
Now,I want 6td get focus.
I write this but I have not the right answer.
if(colselected==4)
{
$(row).find('td').eq(6).focus();
}
How can it be done?

you can refer below code for the help. Here we have added the focusout listener to all the input elements present in out <table> element. We check if focusout is happening from 4th cell's input or not. And if it is happening from there then we are forcing to focus in 6th cell's input box. Hope it will guide you to achieve your goal.
$(document).ready(function(){
$("#mycustomizedtable td input").focusout(function(){
var currentElem = $(this);
var currentIndex = currentElem.closest("td").index();
if(currentIndex == 3)
currentElem.closest("tr").find(":nth-child(6)").find("input").focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="mycustomizedtable">
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
<th>Seventh</th>
</thead>
<tbody>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text" value="5th value"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text" value="5th value"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</tbody>
</table>

Related

How to get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

Detect html table cell value change

How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});

Sum total of all text box value in a row using jquery

I want to sum all the text box value in a html table row using jQuery.
here is the table:
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
</table>
Here is the jQuery function to add the value of all text box of class expenses and display the result in a text box of id expenses_sum.
$(document).ready(function() {
$(".expenses").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".expenses").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#expenses_sum").val(sum.toFixed(2));
}
how to use this function for each row.
Firstly you have repeated the same id when they should be unique which means your HTML is invalid. You should use a common class instead.
To make this work you need to restrict the .expenses selector to only find the elements within the same row as the input which was changed. To do that you can use closest() to get the nearest parent tr, then find() to get all the inputs.
Also note there are several logic improvements you can make here:
remove the each() loop to add the event handler
providing the reference of calculateSum to the event handler so you can use the this keyword to traverse the DOM
provide a default value of 0 to the value to simplify the sum logic
hook to the change event as well as keyup for when users paste data in to the field. Try this:
$(document).ready(function() {
$(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".expenses").each(function() {
sum += parseFloat(this.value) || 0;
});
$row.find(".expenses_sum").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
</table>
you can use like this
$(document).on('keyup change','input.expenses',function(){
$expenses = $(this).parents('tr').find('.expenses');
$expenseTotal = $(this).parents('tr').find('#expenses_sum');
$expenseTotal.val('0');
$.each($expenses,function(index,object){
if($(object).val()!='')
{
$expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
}
});
});
see demo at - https://jsfiddle.net/Vesharj/zLg3pyq4/
Here is the right way to do this.
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
</table>
And js :
$(document).ready(function(){
$(".expenses").each(function() {
$(this).keyup(function(){
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expenses").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expenses_sum").val(sum.toFixed(2));
}
Hope, it helps

Table cell value accessing in Javascript

I have an html table. Where each table row contains several input text areas and each input text area has unique ids assigned by javascript dynamically.Now I want to put all that ids of the 1st column of my table into an array. I am facing problem in this matter. Help me please.
Html code of my table is as follows:
<table id="POITable">
<tr>
<th>Item</th>
<th>Brand</th>
<th>UOM</th>
<th>Quantity</th>
<th>Remarks</th>
</tr>
<tr style="visibility:hidden;"> <!-- This is just a dummy row-->
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
<td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>
<tr>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><input size=25 type="text"/></td>
<td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
<td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>
</table>
Now my javascript code to put the ids of the input text box is:
function make_summary()
{
var arr=new Array();
var x=document.getElementById('POITable');
var size=x.rows.length;
for (i=2;i<=x.rows.length-1;i++)
{
var each_row=x.rows[i];
var each_col=each_row.cells[1];
console.log(each_col);
}
}
I can access each table data, I mean the td tag, But since there is <input> tag inside each td tag,so how to access that input tag element?
each_col.getElementByTagName(); is not working. It is throwing error.
Please give me some solutions. Please give me only javascript solutions (no jquery please).
As there's always only one element in your td tags, you can just access the inner element with
each_col.getElementsByTagName('input')[0];
Remember that getElementsByTagName() returns a HtmlCollection, not a single element - so you have to specify which of the elements you want to target.
BTW... There's no method called getElementByTagName() - this might be where the confusion comes from. It's the plural of Element -> Elements
getElementsByTagName()
^

How to iterate textbox array in JS

I have text boxes in HTML like:
<table id="tbl">
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
</table>
Now I want to fill the TextBoxes in first row with some value on onchange event of another textbox.
How should I do it?
The following answer by Rahul Fills all the textboxes with the same value but I want to only first 2 tds of first tr of given table with different values.
Please Help.
It would be better to use a js library like jQuery. In jQuery you can do like this.
$(function(){
$("yourtextboxselector").change(function(){
$("#tbl1 tr:first input:text").each ( function(){
$(this).val('new value');
});
});
});
<table id="tbl1">
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
</table>

Categories