The thing is this: I have a GridView control which is populated with data from an SQL table. Each column has simple data such as strings or int numbers. My last column is a "Select CommandField", which pops up a form when clicked. I am trying to make a function in JavaScript which needs to use the value of the first column of the selected row; how is the syntax for this?
Like in C# it would be
myGridView.Rows[myGridView.SelectedIndex].Cells[0].Text
so in JavaScript it should be something like
var grid = document.getElementById('myGridView');
var gridRow = grid.rows[<what_Should_I_Type_Here?>].cells[0].text
Thank you very much in advance!
var grid = document.getElementById('myGridView');
var gridRow = grid.rows[document.getElementById("myGridView").selectedIndex].cells[0].text;
function Redirect(row) {
var rowData = row.parentNode.parentNode;
var rowIndex = rowData.rowIndex;
var grid = document.getElementById('ContentPlaceHolder1_Grd_Dashboard');
var value = grid.rows[rowIndex].cells[0].innerText;
alert(value);
window.location = "PoTracking.aspx?Pid=" + value;
return false;
}
Related
Newbie here.. I was making an expense note app(just a noob app). I have this button function on which when I select one table row.. It will be deleted and the table row input text value will return to the input bar text area(name, date, amount, remarks). I was happy when it work.
But it only work once.
Because when I select different table row data. It will be deleted but the same "first input data value" will always return to the input text bar..
It seems the first table data are being saved in the empty array function that can be reuse again. What I am hoping for is when I use the empty array function it will be empty again to be use in another different table row data.
I am using array methods but failed or my If statement is wrong. Hopefully you can answer this :) thanks
document
.getElementById("editSelection")
.addEventListener("click", editSelection);
function editSelection() {
var editName = [];
var editDate = [];
var editAmount = [];
var editRemarks = [];
let selectedRows = document.getElementsByClassName("selected-row ");
while (selectedRows.length > 0) {
editName.push(cell0.innerText);
editDate.push(cell1.innerText);
editAmount.push(cell2.innerText);
editRemarks.push(cell3.innerText);
selectedRows[0].parentNode.removeChild(selectedRows[0]);
var name = document.getElementById("inputName");
name.value = editName.join("\n");
var date = document.getElementById("inputDate");
date.value = editDate.join("\n");
var amount = document.getElementById("inputAmount");
amount.value = editAmount.join("\n");
var remarks = document.getElementById("inputRemarks");
remarks.value = editRemarks.join("\n");
}
if (name || date || amount || remarks) {
editName.splice([0], editName.length);
editDate.splice([0], editDate.length);
editAmount.splice([0], editAmount.length);
editRemarks.splice([0], editRemarks.length);
}
}
If you define an empty array
var editName = [];
and fill it with values you can empty it again with
editName = [];
function addRow() {
var medicinename = document.getElementById("medicinename");
var time = document.getElementById("time");
var duration = document.getElementById("duration");
var when = document.getElementById("when");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= medicinename.value;
row.insertCell(2).innerHTML= time.value;
row.insertCell(3).innerHTML= duration.value;
row.insertCell(4).innerHTML= when.value;
var cell2=row.insertCell(1);
var element2 =document.createElement("input");
element2.type = "text";
element2.setAttribute("name", "productDynamic");
var get=medicinename.value;
element2.value = get;
cell2.appendChild(element2);
}
here i am going to insert value in table by using onclick function of javascript. I have 5 columns and in first column I am inserting delete button. Its all ok with it.but var cel2=row.insertcell(1) going wrong something it shows me 6 columns. I tried but i can not figure it out. Is there anybody in javascript can help me?one more thing is when i pass the value to table by textfield it is ok, but when i use select field by using option value it passed but value not catch by using like this element2.setattribute("name","productDynamic"); what should i have to do for that also
row.insertCell insert a new row with given index.
If index is -1 or equal to the number of cells, the cell is appended
as the last cell in the row. If index is greater than the number of
cells, an IndexSizeError exception will result. If index is omitted it
defaults to -1. Link
So I think if you create a new cell at an existing Index, it will be append. If you want to overwrite the cell, just get it with row.cells[index] an give it a new value.
I have a dynamic table which has the input field in each row. I would like to get the value entered by the user through Javascript. I am able to get the HTML code for the input field 'quantity' but not the value.
Here is the part of the javascript code :
var table = document.getElementById("mactable");
var row_count = table.getElementsByTagName("tr").length;
var grand_total = document.getElementById("grand_total");
var grand_price = 0.00;
for (var i = 1, row; row = table.rows[i]; i++)
{
var price = row.cells[4].innerHTML;
var quantity = row.cells[2].innerHTML;
alert(quantity);
if(isNumber(price))
{
var num = parseFloat(price);
grand_price = grand_price + num;
}
}
Any idea how can it be done ?
Instead of reading table cell innerHTML you can find inner input element and then read its value property:
var quantity = Number(row.cells[2].querySelector('input').value);
Here row.cells[2] is a td element. Using querySelector('input') you can find the first children input.
Also note, that since the value of the field is a string, you might want to cast it to number, for example with Number function.
We are using DHTMLX Grid. Need some help, please.
I have a table and each columns (has filter/dropdown) are allocated an id eg. fac, date, sel, loc, tag ... etc
We have hard coded the index of columns to set and get the cookie elsewhere.
function doInitGrid(){
mygrid.setColumnIds("fac,date,sel,loc,tag"); //set ids
mygrid.attachEvent("onFilterStart",function(ind,data)
{
setCookie("Tray_fac_filter",mygrid.getFilterElement(0).value,365); //column index 0
setCookie("Tray_loc_filter",mygrid.getFilterElement(3).value,365);//column index 3
setCookie("Tray_tag_filter",mygrid.getFilterElement(4).value,365); //column index 4
mygrid.getFilterElement(0).value = getCookie("Tray_fac_filter")
mygrid.getFilterElement(3).value = getCookie("Tray_dep_filter")
mygrid.getFilterElement(4).value = getCookie("Tray_prg_filter")
});
}
But when the columns are moved, the problem arises as the index of the column changes yet it is set in setCookie /getCoookie
DHTMLX allows to get the index of the id using --
var colInd = grid.getColIndexById(id);
eg: var colInd = grid.getColIndexById(date); // outputs 1.
After moving the date column to the end -- fac, sel, loc, tag, date // it will output 4.
However, we have about 14 columns that can be moved/rearranged and I could use the
var colInd = grid.getColIndexById(id); 15 times
var facInd = grid.getColIndexById("fac");
var dateInd = grid.getColIndexById("date");
var selInd = grid.getColIndexById("sel");
var locInd = grid.getColIndexById("loc";
var tagInd = grid.getColIndexById("tag");
and put those variables in the set/get cookie. I was thinking if there was a better way.
To understand the code better, I have put the minimised version of the code in fiddle.
http://jsfiddle.net/19eggs/s5myW/2/
You've got the best answer I think. Do it in a loop and it's easier:
var cookie_prefix = "Fray_filter_";
var cookie_dur = 365;
var num_cols = dhx_grid.getColumnCount();
// filter vals to cookies
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var filter = mygrid.getFilterElement(col_idx)
if (filter) { // not all columns may have a filter
var col_id = dhx_grid.getColumnId(col_idx);
var cookie_name = cookie_prefix+col_id;
setCookie(cookie_name, filter.value, cookie_dur);
}
}
// cookies to filter vals
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var col_id = dhx_grid.getColumnId(col_idx);
var filter_val = getCookie(cookie_prefix+col_id);
var filter = mygrid.getFilterElement(col_idx)
filter.value = filter_val;
}
You can use dhtmlxgrid native event to assign the correct id everytime a column is moved.
The event is called onAfterCMove, you can check the documentation here. onAfterCMove Event
You would do something like:
mygrid.attachEvent('onAfterCMove',function(cInd,posInd){
//Your processing here to change the cookies; where cInd is the index of the column moved
//and posInd, is the position where it Was moved
}):
I have a table that has checkboxes, if a checkbox is selected i want a raw in the DB to be deleted - using ajax.
with normal form i would simply name all the chexboxs some name lets say name="checkbox[]"
and then simply use foreach($_POST['checkbox'] as $value){}
now i am trying to get all the values of marked checkboxes then put them into an array. seems i am missing something though. here is what i go so far:
var checkboxes = jQuery('input[type="checkbox"]').val();
var temp = new Array();
jQuery.each(checkboxes, function(key, value) {
temp[] = value;
});
Late on i will just pass temp as variable to ajax call.
Is there anything i am missing ?
You can use :checked selector and map method:
var arr = $('input[type="checkbox"]:checked').map(function(){
return this.value
}).get();
You are trying to iterate over the Checkbox values which is wrong . Try this
var $checkboxes = jQuery('input[type="checkbox"]') ;
var temp = new Array();
jQuery.each($checkboxes, function(i) {
var value = $(this).attr('value');
temp[i] = value;
});
If you want to pass only checked items just add a condition.
if($(this).is(':checked')){
var value = $(this).attr('value');
temp[i] = value;
}
Just wrap the table in a form tag, and do this:
var myData = jQuery('#myform').serialize();
jQuery.ajax('myscript.php', {data:myData});