I am using the following snippet and from this I can find the index of a row which one is selected on the basis of checkbox on every row of the table.How can I modify this snippet so that I can get the selected row data instead of index?
Please Help!!
<script>
function myfunction3() {
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for (var i = 0; i < element_tableRows.length; i++) {
var checkerbox = element_tableRows[i].cells[0].firstChild;
if (checkerbox.checked) {
data = data+ element_tableRows[i].getAttribute("name");
}
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}
</script>
as TJ says, i dont see any index in your code. but try something like this which is cleaner
$('.collection tr').each(function () {
//processing this row
$(this).find('td input:checked').each(function () {
// there is checkbox and it is checked, do your business with it
var value_of_checkbox = $(this).val(); // which is 'data' that you wanted
});
});
Related
Any idea how to count rows from a table generated by $.post . I was able to get the html code to a global variable but no success to use it as a input for row count function.
var prelaz;
$(document).ready(function(){
$("input").keyup(function(){
var brkart = $("#brk").val();
var ime = $("#im").val();
var prez = $("#pre").val();
var adres = $("#adr").val();
var tele = $("#tel").val();
$.post("getpacijent.php", {
b: brkart,
i: ime,
p: prez,
a: adres,
t: tele
}, function(data) {
$("#izlaztablica").html(data);
prelaz = data;
});
});
});
function PromenaTable() {
x = (prelaz).attr('rows').length;
document.getElementById("rowcount").innerHTML= x;
}
I call function PromenaTabele() when any of fields #brk, #im, #pre, #adr, #tel changes.
Jquery
function PromenaTable() {
var table=$("#tableId").find('tr').length; // Count Number Of Rows
var table=$("#tableId").find('tr').not(':first').length;//Count Number of Rows Excluding the 1st Row i.e Table Headings
}
In my traveling website I want to filter the search result using multiple check boxes. Currently my code is working as follows.
If I check "Near Airport", it will show only the hotels with the data tag "airport". But when I want to filter the hotels which are near to both the air port and the shopping district at the same time, it will not work. It shows the list of hotels which have the data tag "airport" OR "shopping". I want to change it to list the hotels which have both data tags "airport" AND "shopping".
Screenshot of the web site http://prntscr.com/c49csj
Code in Context
$(document).ready(function(){
$('.category').on('change', function(){
var category_list = [];
$('#filters :input:checked').each(function(){
var category = $(this).val();
category_list.push(category);
});
if(category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function(){
var item = $(this).attr('data-tag');
var itemarr = item.split(',');
$this = $(this);
$.each(itemarr,function(ind,val){
if(jQuery.inArray(val,category_list) > -1){
$this.fadeIn('slow');
return false;
}
else
$this.hide();
});
});
}
});
});
You need to ensure that all elements in category_list array are available in itemarr array. The post How to check whether multiple values exist within an Javascript array should solve your problem e.g in the else block, modify your code as follows:
var item = $(this).attr('data-tag');
var itemarr = item.split(',');
var hideItem = false;
for(var i = 0 , len = itemarr.length; i < len && !hideItem; i++){
hideItem = ($.inArray(itemarr[i], category_list) == -1);
}
if(hideItem) {
$this.hide();
} else {
$this.fadeIn('slow');
}
There are two things I would like help with please. I need help accessing the currently edited existing row in the Radgrid, as as well as the index of the Edit form when trying to add a new record to the table/
function OnClientSelectedIndexChanged(sender, eventArgs) {
var item = eventArgs.get_item();
// alert(item.get_value());
grid = $find("<%= rgSecurity.ClientID %>");
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems();
// alert("about to get to grid");
alert(selectedRows.length);
if (selectedRows.length > 1) {
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
alert(row);
inputField = MasterTable.getCellByColumnUniqueName(row, "Item")
alert(inputField);
if (inputField) {
inputFieldValue = inputField.value
break;
}
}
}
else
{
// alert(inputField);
}
window.radopen('<%=PopLink %>?sel=' + item.get_value() + "&avail=" + inputFieldValue, "UserRoleDialog");
return false;
}
The currently edited grid row can be retrieved on the server using the EditItems[0] collection of the master table or through the e.Item argument inside the EditCommand server event handler. The index of the edited row can be fetched from the ItemIndex property of the item referenced as explained in the first sentence.
I looking to save all data from my grid to a server. I'm using jquery Datatables plugin.
function fnSave() {
var aTrs = oTable.fnGetNodes();
var aReturn = new Array();
for(var i=0;i<aTrs.length;i++) {
var aData=oTable.fnGetData(i);
aReturn.push( aData );
}
console.log(aReturn);
}
As return I get :
"<input name="regimentNameAgents" value="" id="regimentNameAgents" type="text">"
...
I would like to only return grid values (and not HTML).
By using this function, my value is always: value="", even if I add text in the input, why?
Is there a better way to extract all grid data ?
The data that's stored in the JDataTable isn't what's currently in the DOM, it's what you set it with originally. So when you update an input, the DOM element is updated, but there's no hook to update the data held in the jdatatable. I'd build the grid something more like this:
var grid = new Array();
$("table tr").each(function() {
var nextRow = new Array();
grid.push(nextRow);
$("td", this).each(function() {
var nextValue = $("input", this).val();
nextRow.push(nextValue);
});
});
The grid variable should then be storing your full table of data. I'm making a few assumptions about how you've structured your table there, since it wasn't posted, but I'm guessing that's fairly close to what you've got.
By using Datatables fnGetNodes, here is the solution :
function fnSave() {
var aTrs = oTable.fnGetNodes();
var aReturn = new Array();
$(aTrs).each(function() {
var nextRow = new Array();
aReturn.push( nextRow );
$("td", this).each(function() {
var nextValue = $("input", this).val();
nextRow.push(nextValue);
});
});
console.log(aReturn);
}
How do we stor selected row in array in JavaScript?
You shoud be more specific in what kind of object youre using in your html (DOM) code.
exampl:
if you're using a SELECT 'resources' in a form
var fl = form.resources.length -1;
//Pull selected resources and add them to list
for (fl; fl > -1; fl--) {
if (form.resources.options[fl].selected) {
theText = form.resources.options[fl].text;
theValue = form.resources.options[fl].value);
//your code to store in an aray goes here
//...
}
}
If I got it you want to store selected table rows using javaScript.
If yes, this may help.
This piece of code is to accumulate selected ID's (dataId), based on selection of selected row's id(elemId), in an input (hidId).
I have modified my original code to maintain the records in an Array as well.
function checkSelection(hidId,elemId,dataId)
{
var arr =
str = '_' + dataId + '_';
hid = document.getElementById(hidId);
row = document.getElementById(elemId);
if(!row.classList.contains("selected")) {
row.classList.add("selected");
if(!hid.value.toString().includes(str)) {
hid.value = hid.value + str;
}
if(arr.includes(dataId))
arr.push(dataId);
}
else {
row.classList.remove("selected");
if(hid.value.toString().includes(str))
hid.value = hid.value.replace(str,"");
if(!arr.indexOf(dataId)==-1)
delete arr[arr.indexOf(dataId)];
}
alert(arr.toString());
}[I have tested it][1]
to focus more on the Array() a basic solution would be as below:
function checkSelect(hidId,elemId,dataId)
{
row = document.getElementById(elemId);
str = "";
if(document.getElementById(hidId).getAttribute("value")!=null)
str = str+document.getElementById(hidId).getAttribute("value");
str= str.replace('[','')
.replace(']','')
.replace('"','')
.replace('\\','');
document.getElementById(hidId).setAttribute("value",str);
alert(document.getElementById(hidId).value);
var arr = new Array();
if(document.getElementById(hidId).value.length!=0 ) {
arr=document.getElementById(hidId).value.split(',');
}
if(!row.classList.contains("selected")) {
row.classList.add("selected");
if(!arr.includes(dataId.toString())) {
arr.push(dataId.toString());
}
}
else {
row.classList.remove("selected");
if(arr.includes(dataId.toString()))
{
delete dataId.toString();
arr.splice(arr.indexOf(dataId.toString()),1)
}
}
if(arr.length>0) {
document.getElementById(hidId).setAttribute("value", arr.toString());
}
else
document.getElementById(hidId).setAttribute("value", "");
}