I have an asp.net gridview with one column as a template filed with a panel with some controls like textbox and dropdown list.
So, onclick, with js I can give the value of a cell by row and column, but in this panel column how can I get the inner elements?
function t3(tab, element, NParents, col)
{
//alert("t3")
var grd = document.getElementById(tab);
if (grd != null)
{
var row = element
for (i = 0; i < NParents; i++)
{
row = row.parentNode
}
alert(grd.rows[row.rowIndex].cells[col].innerHTML)
}
}
innerHtml give me the HTML of the panel, now how can I find its elements?
but in this panel column how can i get the inner elements?
You can use querySelector to query the DOM element
var cell = grd.rows[row.rowIndex].cells[col];
var textbox = cell.querySelector( "input[type='text']" ); //will return input box inside the text
var select = cell.querySelector( "select" ); //will return dropdown inside the text
Related
I am trying to search through a table, which works alright without input tags, however I want to keep the input tags inside the table cells. I have tried using td.firstElementChild.value but this did not work.... what do I need to fix in order to search through the table?
here is my fiddle: https://jsfiddle.net/Souleste/1fxxzoe7/114/
One solution is to include a common className to be us used by all input elements.
You already do this when creating the input controls:
input1.className = 'input';
Though, I recommend maybe using a more descriptive className, but either will work as long as the className is unique to the input controls on the page:
input1.className = 'search-input';
You also already have a unique id for each TR (row) element.
tr.id = 'row' + rowCount;
Add this id as a data- attribute on the input element, like so:
input1.setAttribute('data-tr-id', 'row' + rowCount);
Now, get the inputs by className and inspect the values:
var inputElements = document.getElementsByClassName('search-input');
inputElements.foreach(function(item, index){
var value = item.value;
// use the data-tr-id attribute to find the TR element to hide/show
var trElementId = item.getAttribute('data-tr-id');
var trElement = document.getElementById(trElementId);
// do the value comparison and hide/show as needed
if (value.toUpperCase().indexOf(filter) > -1) {
tr.style.display = '';
} else {
tr.style.display = 'none';
}
});
I have a table that displays selectable information. Sometimes there are child rows that are selectable.
I want the parent rows to be selectable if they have no children, otherwise only the child rows should be selectable. This is a select-only-one type of table.
This table works as expected. However, I want to disable the hover on the non-selectable parent row.
Here is a working plunker: http://plnkr.co/edit/Z0cgHKx2qxpekEE36O1K?p=preview
Here is an example of some of the code in the controller:
scope.parentSelected = [];
$scope.childSelected = [];
$scope.getParentDetails = function(parentObj) {
if(!parentObj.jobs || parentObj.jobs.length === 0) {
nonSelectOtherRows();
var index = $scope.pro.indexOf(parentObj);
$scope.parentSelected[index] = !$scope.parentSelected[index];
// get details for parent row using parentObj
console.log(parentObj);
}
};
$scope.getChildDetails = function(parentObj, childObj) {
nonSelectOtherRows();
var parentIndex = $scope.pro.indexOf(parentObj);
var childIndex = parentObj.jobs.indexOf(childObj);
$scope.childSelected[parentIndex] = [];
$scope.childSelected[parentIndex][childIndex] = !$scope.childSelected[parentIndex][childIndex];
// get details for parent and child rows using parentObj and childObj.
// childObj is the childRow selected
console.log(parentObj);
console.log(childObj);
}
Remove table-hover attribute.
Implement your ng-mouseover and ng-mouseleave functions.
$scope.hoverIn = function(row){
row.hoverEdit = true;//check selectable or not
};
$scope.hoverOut = function(row){
row.hoverEdit = false;
};
Define css class for hover.
.custom-hover {
background-color: red;
}
Finally add class to your tr
`'custom-hover': x.hoverEdit`
here is: http://plnkr.co/edit/CJxi86GyM8jMbtehPQgU?p=preview
Add your selectable control inside hoverIn and it will be work.
try to use ng-class. it will help you.
Firstly,
If possible, I would like to do this without JQuery, and purely Javascript.
Ok so I have an html table with rows getting added dynamically to it.
In each row is a:
Select Element (id = "ddFields")
Text Input Element (id = "tfValue")
Button Element (no id)
The Button Element removes the row for which it is situated
The Select Element has a default option of "" and then other 'valid' options
The Text Input is added to the row but it is hidden.
All elements are in the same
Basically I would like for the Select Element to show the hidden text input element if the selected index is != 0
so far I have this for my onchange function:
function itemChanged(dropdown) //called from itemChanged(this)
{
var cell = dropdown.parentNode;
var row = cell.parentNode;
var rowIndex = dropdown.parentNode.parentNode.rowIndex;
var index = dropdown.selectedIndex;
var option = dropdown.options[dropdown.selectedIndex].text;
if(index >0)
{
alert(row);
var obj=row.getElementById("tfValue"); //tfValue is the Text Field element
alert(obj);
//row.getElementById("tfValue").hidden = "false"; //doesn't work
//row.getElementById("tfValue").setAttribute("hidden","true"); //doesn't work
}
else
{
alert('none selected');
}
}
Finally figured it out. So here it is:
SCENARIO:
A table that has rows added to it dynamically.
In each row there is a select element and an input text element.
The select element changes text-value of the input text element based on the index of the select element.
in your select element set the onchange function to this:
onchange="selectionChanged(this)"
then create a javascript function shown below:
function selectionChanged(dropdown)
{
//get the currently selected index of the dropdown
var index = dropdown.selectedIndex;
//get the cell in which your dropdown is
var cell = dropdown.parentNode;located
//get the row of that cell
var row = cell.parentNode;
//get the array of all cells in that row
var cells = row.getElementsByTagName("td");
//my text-field is in the second cell
//get the first input element in the second cell
var textfield = cells[1].getElementsByTagName("input")[0];
//i use the first option of the dropdown as a default option with no value
if(index > 0)
{
textfield.value = "anything-you-want";
}
else
{
textfield.value = null;
}
}
Hope this helps whoever. It bugged me for a very long time. Thanks shub for the help! :)
first, I hope you are not repeating your ids. No two items should have the same id.
If you're iterating, create id1, id2, id3.
Also, this is not necessary but I suggest introducing your vars like this:
var a = x,
b = y,
c = z;
If you decide to use jQuery you could just do this:
$('#tableid').on('click','button',function(){
$(this).parent().parent().remove();
});
$('#tableid').on('change', 'select',function(){
if($(this).val()){ $(this).next().show(); }
});
Be sure to change #tableid to match your table's id.
This assumes the text input is the very next element after the select box. If not so, adjust as necessary or ask and I'll edit.
I have a JSF <h:datatable> with two columns.
column 1 : <h:outputText>, gets populated from bean data.
coulmn 2 : <h:inputText> boxes.
There is a "Total" field outside the table and I want to have it show the total of fields as entered in column2 in realtime. So I did searching around and found out that I need a JavaScript to do this. I am however quite new to JS.
Where I am confused is how to access the value of the input text box. What I have done so far:
function totalFrom() {
var element = document.getElementById('transferFundsForm:fundsFromTable:0:from_transferAmt');
if(element != null){
document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value = document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value+ element;
}
}
As far as I understand, the transferFundsForm:fundsFromTable:0, here 0 represents the first row. How do I refer to the element in column that is being edited?
I have called this function on onblur event of the textBox in column.
Also I read that I can use <f:ajax> for this as well, but I am using JSP instead of Facelets, so I can't use <f:ajax>.
The HTML DOM element representation of <table> element has a rows property which gives you an array of all <tr> elements. The HTML DOM representation of this <tr> element has a cells property which gives you an array of all <td> elements.
So, provided that the 2nd column of the table contains only one <input> element which holds the value you'd like to sum up, and that totalFrom is an <input> element (at least, you're attempting to set the value property and not innerHTML), you could achieve this as follows:
function totalFrom() {
var table = document.getElementById('transferFundsForm:fundsFromTable');
var total = 0;
for (var i = 0; i < table.rows.length; i++) {
var secondColumn = table.rows[i].cells[1];
var input = secondColumn.getElementsByTagName('input')[0];
var value = parseInt(input.value);
if (!isNaN(value)) {
total += value;
}
}
document.getElementById('transferFundsForm:totalFrom').value = total;
}
If the totalFrom is however a <h:outputText id="totalFrom">, then set it as follows instead:
document.getElementById('transferFundsForm:totalFrom').innerHTML = total;
Why don't you use the jsf server side event or user
http://livedemo.exadel.com/richfaces-demo/
it also provide you builtin ajax functionality
function newRow(t) {
var parent = t.parentNode.parentNode.parentNode;
var row = t.parentNode.parentNode.cloneNode(true);
row.firstChild.nextSibling.firstChild.setAttribute('value', 'sumit');
parent.appendChild(row);
}
function removeRow(t) {
var y = t.parentNode.parentNode;
y.parentNode.removeChild(y);
}
the above code is working fine but i want to delete all the clones at once which are created by above code on a onchange event of a select box
Just add a class name to the cloned elements which would allow you to search for them and delete them later:
var row = t.parentNode.parentNode.cloneNode(true);
row.className += ' clonedrow';
...
// Remove all the cloned rows
var clonedRows = document.querySelectorAll('.clonedrow');
for (var i = 0; i < clonedRows.length; i++) {
clonedRows[i].parentNode.removeChild(clonedRows[i]);
}
Once the cloned rows have been added to the DOM, they look (to JavaScript) just like the original rows.
Since you're just appending cloned rows to the table body, what I would do is as follows:
Outside the functions, as soon as the document loads, use .childNodes.length to get the number of rows in your table and store it globally in, say, lastpos.
When you need to delete the clones, start at .childNodes[lastpos] and remove nodes until the table has lastpos rows again.