I have a jqgrid populated by some fields. I want some of the cells to be
editable:true
or
editable:false
based on a condition
Here's my function (EDITED):
var grid = $("#mygrid");
var getColumnIndexByName = function(gr,columnName) {
var cm = gr.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
function abilitaDisabilitaEditRecord() {
var pos=getColumnIndexByName(grid,'descrizione');
var pos2=getColumnIndexByName(grid,'endDate');
var allIds = $('#mygrid').jqGrid('getDataIDs');
var cells = $("tbody > tr.jqgrow > td:nth-child("+(pos+1)+")",grid[0]);
var cells2 = $("tbody > tr.jqgrow > td:nth-child("+(pos2+1)+")",grid[0]);
for (var i = 0; i < allIds.length; i++) {
for (var j=0; j<cells.length; j++) {
var cell = $(cells[j]);
var cell2 = $(cells2[j]);
var checkDataFine = $('#mygrid').jqGrid('getCell', allIds[i], 'date');
if (!checkDataFine==false) {
cell.addClass('not-editable-cell');
cell2.addClass('not-editable-cell');
}
}
}
}
you can call this in you else condition, i didn't test it, but i think this should work
$("#mygrid").jqGrid('restoreRow',allIds[i]);
Here's the working solution:
var grid = $("#mygrid");
var getColumnIndexByName = function(gr,columnName) {
var cm = gr.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i;
}
}
return -1;
};
function changeEditableByContain() {
var pos=getColumnIndexByName(grid,'field1');
var pos2=getColumnIndexByName(grid,'field2');
var pos3=getColumnIndexByName(grid,'field3');
var pos4=getColumnIndexByName(grid,'field4');
var allIds = $('#mygrid').jqGrid('getDataIDs');
var cells = $("tbody > tr.jqgrow > td:nth-child("+(pos+1)+")",grid[0]);
var cells2 = $("tbody > tr.jqgrow > td:nth-child("+(pos2+1)+")",grid[0]);
var cells3 = $("tbody > tr.jqgrow > td:nth-child("+(pos3+1)+")",grid[0]);
var cells4 = $("tbody > tr.jqgrow > td:nth-child("+(pos4+1)+")",grid[0]);
for (var i = 0; i < allIds.length; i++) {
var cell = $(cells[i]);
var cell2 = $(cells2[i]);
var cell3 = $(cells3[i]);
var cell4 = $(cells4[i]);
if (condition...) {
cell.addClass('editable-cell');
cell2.addClass('editable-cell');
cell3.addClass('editable-cell');
cell4.addClass('editable-cell');
}
else{
cell.addClass('not-editable-cell');
cell2.addClass('not-editable-cell');
cell3.addClass('not-editable-cell');
cell4.addClass('not-editable-cell');
}
}
}
and then call onloadcomplete:
changeEditableByContain();
Related
I'm relatively new to the world of JavaScript. I create a grid in which I can select any cells.
Now I would like to send all cells as binary with a Json document to the backend. For this purpose, an unselected cell should have a 0 and a selected one should have a 1. I orientate myself on Conway's Game of Life. I've been at it for 2 days now and don't know how best to implement it. Does anyone have an idea?
Here is my code to create the grid
var rows = 10;
var cols = 10;
var grid = new Array(rows);
var nextGrid = new Array(rows);
var startButton = document.getElementById('start');
startButton.addEventListener('click', event => {
initialize()
})
function initializeGrids() {
for (var i = 0; i < rows; i++) {
grid[i] = new Array(cols);
nextGrid[i] = new Array(cols);
}
}
function copyAndResetGrid() {
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
grid[i][j] = nextGrid[i][j];
}
}
}
// Initialize
function initialize() {
createTable();
initializeGrids();
}
// Lay out the board
function createTable() {
var gridContainer = document.getElementById('gridContainer');
if (!gridContainer) {
// Throw error
console.error("Problem: No div for the drid table!");
}
var table = document.createElement("table");
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < cols; j++) {
var cell = document.createElement("td");
cell.setAttribute("id", i + "_" + j);
cell.setAttribute("class", "dead");
cell.onclick = cellClickHandler;
tr.appendChild(cell);
}
table.appendChild(tr);
}
gridContainer.appendChild(table);
}
function cellClickHandler() {
var rowcol = this.id.split("_");
var row = rowcol[0];
var col = rowcol[1];
var classes = this.getAttribute("class");
if(classes.indexOf("live") > -1) {
this.setAttribute("class", "dead");
grid[row][col] = 0;
} else {
this.setAttribute("class", "live");
grid[row][col] = 1;
}
}
Here I created a table and assigned each cell an id. What I want to do is something like this cell1.onclik = MyFunction(this.id);
function createTable() {
var table = document.getElementById("tabela2");
for (let j = 0; j < k; j++) {
var row = table.insertRow(0);
for (let i = 0; i < l; i++) {
var cell1 = row.insertCell(0);
cell1.id = "celica" + i + "_" + j;
/*doesnt work: cell1.onclik = MyFunction(this.id); */
}
}
}
Don't use onXXX events. It won't work it there is a content-security-policy on the page.
You just need to listen to the table
function createTable() {
var table = document.getElementById("tabela2");
// document.body.appendChild(table);
for (let j = 0; j < 4; j++) {
var row = table.insertRow(0);
for (let i = 0; i < 4; i++) {
var cell1 = row.insertCell(0);
cell1.textContent = "1";
cell1.id = "celica" + i + "_" + j;
}
}
table.addEventListener("click", function(e) {
console.log(e.target.id);
console.log(e.target.tagName);
});
}
createTable();
<html><body><table id='tabela2'></table></body></html>
This is the JavaScript. The select has an id of 'counties'.
The table is to be inserted into a div called 'up_bottom'.
var leagueArray = [];
function addTeams() {
var county=document.getElementById("counties");
var val = county.options[county.selectedIndex].value;
leagueArray.push(val);
function display() {
var table = document.createElement("table");
for (var i=0; i<leagueArray.length; i++) {
var row = table.insertRow();
for (var j=0; j<leagueArray[i].length; j++) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(leagueArray[i]));
}
}
var tableDiv = document.getElementById("up_bottom");
tableDiv.appendChild(table);
}
display();
}
Please do the following Steps
Get Selected Value from Dropdown
Put the Selected Value into Array
Create A String of tr element and append it to Table before First tr element
Try this,
function addTeams(){
var leagueArray = [];
var county=document.getElementById("counties");
for (i = 0; i < county.options.length; i++) {
leagueArray[i] = county.options[i].value;
}
display(leagueArray);
}
function display(leagueArray) {
var table = document.createElement("table");
for (var i=0; i<leagueArray.length; i++) {
var row = table.insertRow();
for (var j=0; j<leagueArray[i].length; j++) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(leagueArray[i]));
}
}
var tableDiv = document.getElementById("up_bottom");
tableDiv.appendChild(table);
}
addTeams();
I have this html table:
tabela
|A|B|C|D|
_________
001|M|N|O|P|
002|R|S|T|U|
And with this script I can get the row 1st value, e. onclick N get the value 001
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function() {
var rowid = (this.cells[0].innerHTML);
window.location.href = "next.php?rowidphp="+ rowid;
});
}
The thing is that I need to get the column 1st value, e. onclick N shuld get the value B
I'm trying everything but I can reach the point.....
Here's the fiddle: http://jsfiddle.net/t7G6K/
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function (e) {
var rowid = (this.cells[0].innerHTML);
var j = 0;
var td = e.target;
while( (td = td.previousElementSibling) != null )
j++;
alert(rows[0].cells[j].innerHTML);
});
}
Try this:
table = document.getElementById("tablea");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].cells[2].onclick = function (e) {
rowid = e.target.previousElementSibling.previousElementSibling.textContent;
alert(rowid);
};
}
Here is the Demo
jsFiddle http://jsfiddle.net/2dAkj/9/#
Ok with jQuery i would do it like this.
$(function () {
$('table').on('click', function (e) {
var x = $(e.target);
var index = x.parents('tr').find('td,th').index(x);
alert($(x.parents('table').find('tr').first().find('td,th')[index]).text());
});
});
I have dynamic html table and every cell have one checkbox. I want to get the selected checkbox if the user select from multiple checkbox from different row.
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
chkedshid = chkedshid + chkedshid
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
}
}
document.getElementById('Hidden_CellSelected').value = chkedshid.join();
document.getElementById("BtnSav2Cart").click();
}
why why this function return just last selected checkbox for last row in loop????
i need the all selected checkbox for all rows!!!!!!!
Assuming you are using jQuery.
Then you can simply do -
$("#myTableId input:checked")
If your checkbox have specific class then you can also do -
$("#myTableId .specificCheckboxClass:checked")
On some Button click try to execute this code
var checkedTransactions = $("input:[name='idofcheckboxe']:checked").map(function () {
return $(this).val();
}).get();
var will return all id of check boxes which are selected
thanks all i solve the problem:
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
var totlchk = new Array();
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
totlchk = totlchk.concat(chkedshid.join());
}
}
document.getElementById('myHiddenfield').value = totlchk.join();
document.getElementById("BtnSav2Cart").click();
}
var table = document.getElementById("mytable");
checkbox = table.getElementsByTagName("input");
for(var indexCheckbox = 1; indexCheckbox<checkbox.length; indexCheckbox++){
if(checkbox[indexCheckbox].checked){
//do something
}
}