I am not getting the grid cell value.It's always empty. How can i get the cellvalue?
Code:
function VallidRcvQuantity (txtcurrentrcved) {
var grid = document.getElementById("<%=gvGoodReceived.ClientID%>");
var txtcurrentrcvamount = txtcurrentrcved;
for (var i = 0; i < grid.rows.length - 1; i++) {
var cellValue = $("#gvGoodReceived").find("tr:eq(" + i + ")").find("td:eq(2)").text();
if (Number(txtcurrentrcvamount) > Number(cellValue)) {
alert("Receive quantity must be less or equal PO quantity");
return false;
}
}
return true;
}
The reason you are not getting a cell value is because for the row with index 0, there are no td elements but only th elements within a tr element. This row is the header row.
So, you must either skip the first row in your original code or use code like below.
function getGridViewCellValue() {
var grid = document.getElementById("<%=gvGoodReceived.ClientID%>");
for (var i = 0; i < grid.rows.length - 1; i++) {
var cell = $("#<%=gvGoodReceived.ClientID%>").find("tr:eq(" + i + ")").find("td:eq(2)");
if (cell.length > 0) {
var cellValue = cell.text();
return cellValue;
}
}
return null;//means no cell value was found
}
Related
I've created a table dynamically, but now I want to create a dropdown row on demand. I have an onclick handler for each row. Upon clicking, this row should drop something downward (like a hidden div but unfortunately these cannot be easily created in a dynamic setting, as there's not a way to assign a unique id at row creation. Is this even possible in Javascript/jQuery? or, preferably, twitter bootstrap?
function buildHtmlTable(portalData, tablename) {
var columns = [];
var headerTr$ = $('<tr/>');
var n = 0;
if (tablename == "order-table") {
document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
n = 1;
}
for (var i = 0 ; i < portalData.length ; i++) {
var rowHash = portalData[i];
for (var key in rowHash) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$('#' + tablename).append(headerTr$);
for (i = 0 ; i < portalData.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = n ; colIndex < columns.length ; colIndex++) { // n is how many columns to drop, based on table name
var cellValue = portalData[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$('#' + tablename).append(row$);
}
// Drop unnecessary columns
for(i = 0 ; i<n; i++) {
$("#order-table").find('td,th').first().remove();
}
if (tablename == "order-table") {
var tablerows = document.getElementsByTagName('tr');
for (var x in tablerows) {
tablerows[x].classList.add("clickable");
tablerows[x].setAttribute(data-toggle,"collapse");
tablerows[x].setAttribute(data-target,"");
}
}
}
I am trying to create an excel-like table to update and log things on the go.
I have found this javascript:
function init()
{
var tables = document.getElementsByClassName("editabletable");
var i;
for (i = 0; i < tables.length; i++)
{
makeTableEditable(tables[i]);
}
}
function makeTableEditable(table)
{
var rows = table.rows;
var r;
for (r = 0; r < rows.length; r++)
{
var cols = rows[r].cells;
var c;
for (c = 0; c < cols.length; c++)
{
var cell = cols[c];
var listener = makeEditListener(table, r, c);
cell.addEventListener("input", listener, false);
}
}
}
function makeEditListener(table, row, col)
{
return function(event)
{
var cell = getCellElement(table, row, col);
var text = cell.innerHTML.replace(/<br>$/, '');
var items = split(text);
if (items.length === 1)
{
// Text is a single element, so do nothing.
// Without this each keypress resets the focus.
return;
}
var i;
var r = row;
var c = col;
for (i = 0; i < items.length && r < table.rows.length; i++)
{
cell = getCellElement(table, r, c);
cell.innerHTML = items[i]; // doesn't escape HTML
c++;
if (c === table.rows[r].cells.length)
{
r++;
c = 0;
}
}
cell.focus();
};
}
function getCellElement(table, row, col)
{
// assume each cell contains a div with the text
return table.rows[row].cells[col].firstChild;
}
function split(str)
{
// use comma and whitespace as delimiters
return str.split(/,|\s|<br>/);
}
window.onload = init;
And it seems like it will work well in saving and keeping the edits in the table.
The issue is, however, that I am using pycharms and - unfortunately - cannot use a js file within mine.
Is there a way to convert this to Python, or a way to code a table within Python?
I am using fullcalendar.io, regular view displays only one event per row. What I want to achieve is displaying three events in one row. This could be done by putting three links in one <td> element. This td element is generated thanks to fullcalendar.io library.
Below there is what I've achieved until now:
for (i = 0; i < levelCnt; i++) { // iterate through all levels
levelSegs = segLevels[i];
col = 0;
tr = $('<tr/>');
segMatrix.push([]);
cellMatrix.push([]);
loneCellMatrix.push([]);
// levelCnt might be 1 even though there are no actual levels. protect against this.
// this single empty row is useful for styling.
if (levelSegs) {
var levelSegsDivided = Math.ceil(levelSegs.length / 3);
iterationStart = 0;
iterationEnd = 3;
for (k = 0; k < levelSegsDivided; k++) {
var elems;
for (j = iterationStart; j < iterationEnd; j++) {
seg = levelSegs[j];
if (seg != null) {
emptyCellsUntil(seg.leftCol);
// create a container that occupies or more columns. append the event element.
td = $('<td class="fc-event-container"/>').append(seg.el);
console.log(seg.el);
//if (seg.leftCol != seg.rightCol) {
// td.attr('colspan', seg.rightCol - seg.leftCol + 1);
//}
//else { // a single-column segment
// loneCellMatrix[i][col] = td;
//}
while (col <= seg.rightCol) {
cellMatrix[i][col] = td;
segMatrix[i][col] = seg;
col++;
}
tr.append(td);
iterationStart = iterationEnd;
iterationEnd = iterationEnd + 3;
}
}
}
//for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
// seg = levelSegs[j];
// emptyCellsUntil(seg.leftCol);
// // create a container that occupies or more columns. append the event element.
// td = $('<td class="fc-event-container"/>').append(seg.el);
// if (seg.leftCol != seg.rightCol) {
// td.attr('colspan', seg.rightCol - seg.leftCol + 1);
// }
// else { // a single-column segment
// loneCellMatrix[i][col] = td;
// }
// while (col <= seg.rightCol) {
// cellMatrix[i][col] = td;
// segMatrix[i][col] = seg;
// col++;
// }
// tr.append(td);
//}
}
emptyCellsUntil(colCnt); // finish off the row
this.bookendCells(tr);
tbody.append(tr);
}
And regular library code below:
renderSegRow: function(row, rowSegs) {
var colCnt = this.colCnt;
var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels
var levelCnt = Math.max(1, segLevels.length); // ensure at least one level
var tbody = $('<tbody/>');
var segMatrix = []; // lookup for which segments are rendered into which level+col cells
var cellMatrix = []; // lookup for all <td> elements of the level+col matrix
var loneCellMatrix = []; // lookup for <td> elements that only take up a single column
var i, levelSegs;
var col;
var tr;
var j, seg;
var td;
// populates empty cells from the current column (`col`) to `endCol`
function emptyCellsUntil(endCol) {
while (col < endCol) {
// try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell
td = (loneCellMatrix[i - 1] || [])[col];
if (td) {
td.attr(
'rowspan',
parseInt(td.attr('rowspan') || 1, 10) + 1
);
}
else {
td = $('<td/>');
tr.append(td);
}
cellMatrix[i][col] = td;
loneCellMatrix[i][col] = td;
col++;
}
}
for (i = 0; i < levelCnt; i++) { // iterate through all levels
levelSegs = segLevels[i];
col = 0;
tr = $('<tr/>');
segMatrix.push([]);
cellMatrix.push([]);
loneCellMatrix.push([]);
// levelCnt might be 1 even though there are no actual levels. protect against this.
// this single empty row is useful for styling.
if (levelSegs) {
for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
seg = levelSegs[j];
emptyCellsUntil(seg.leftCol);
// create a container that occupies or more columns. append the event element.
td = $('<td class="fc-event-container"/>').append(seg.el);
if (seg.leftCol != seg.rightCol) {
td.attr('colspan', seg.rightCol - seg.leftCol + 1);
}
else { // a single-column segment
loneCellMatrix[i][col] = td;
}
while (col <= seg.rightCol) {
cellMatrix[i][col] = td;
segMatrix[i][col] = seg;
col++;
}
tr.append(td);
}
}
emptyCellsUntil(colCnt); // finish off the row
this.bookendCells(tr);
tbody.append(tr);
}
return { // a "rowStruct"
row: row, // the row number
tbodyEl: tbody,
cellMatrix: cellMatrix,
segMatrix: segMatrix,
segLevels: segLevels,
segs: rowSegs
};
}
Can someone please tell me what I'm doing wrong?
I think it's something with the string adding;
I've also tried:
var column = $("<td></td>")
instead of:
var column = $("<td>")
etc
and it's always the same result on the HTML : "[object Object]"
What am I doing wrong?
$(function() {
createTable(8);
});
function createTableColumn() {
var column = $("<td>");
return column;
}
function createTableRow(gameBoardSize) {
var columns = "";
var row;
for(counter = 0; counter < gameBoardSize; counter++) {
columns = columns + createTableColumn();
}
row = $("<tr>").append(columns);
return row;
}
function createTable(gameBoardSize) {
var rows = "";
for(counter = 0; counter < gameBoardSize; counter++) {
rows += createTableRow(gameBoardSize);
}
$("#gameboard-table").append(rows);
}
You are accidentally performing a string concatenation operation with += createTableRow.... Change rows to an array and use push instead
var rows = [];
for(counter = 0; counter < gameBoardSize; counter++) {
rows.push(createTableRow(gameBoardSize));
}
+ is for concatenating strings, not jQuery objects.
Just append directly to the jQuery objects:
function createTableRow(gameBoardSize) {
var row = $("<tr>");
for(var counter = 0; counter < gameBoardSize; counter++) {
row.append(createTableColumn());
}
return row;
}
function createTable(gameBoardSize) {
for(var counter = 0; counter < gameBoardSize; counter++) {
$("#gameboard-table").append(createTableRow(gameBoardSize));
}
}
Make sure you use local variables for loop counters. Otherwise, the for loop in createTableRow updates the counter in createTable, which causes that loop to end prematurely.
$(function(){
createTable(8);
var i=0;
$('td').each(function(){
i++;
$(this).text(i);
});
});
function createTable(number){
for(var count = 0;count<number;count++){
$('#gameboard-table').append('<tr>');
$('tr').append('<td>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table id="gameboard-table"></table>
just string concatenation and one append.
function createTable(rowsCount, columnsCount) {
var rows = "";
var cell = "";
var table = $("<table />")
for (var i = 0; i < columnsCount; i++) {
cell += "<td></td>";
}
for (var i = 0; i < rowsCount; i++) {
rows += "<tr>" + cell + "</tr>";
}
table.append(rows);
return table;
}
I trying to get the <th> content of the clicked <td> item.
here is the fiddle: http://jsfiddle.net/zrccq447/
the thing is, the <th> can have colspan 2 or 3, this is the point where I am stuck. this is my code
$('#table9').on('click', 'td:not(:nth-child(1))', function () {
var td = $(this);
var clicked_pos = td.index();
var x = $('#headerx9 th:nth-child(' + (clicked_pos) + ')').text();
var xy = td.text();
alert(x);
});
i want x to be the <th> of clicked td. the problem is now that if you click on some td that shares the th with other tds, i am getting the wrong th.
appreciate any help
I've updated your JsFiddle with the answer found here: Finding a colSpan Header for one of the cells or td's is Spans
JsFiddle: http://jsfiddle.net/zrccq447/4/
$('#table9').on('click', 'td:not(:nth-child(1))', function () {
var td = $(this);
var clicked_pos = td.index();
var x = $('#headerx9 th:nth-child(' + thLocator[clicked_pos] + ')').text();
var xy = td.text();
alert(x);
});
var thLocator = [], colCount = 1;
$('#table9').find('tr:first th').each(function () {
for (var i = 0; i < this.colSpan; i++) {
thLocator.push(colCount);
}
colCount++;
});
Following on from my comment you need to sum up the colspans (or default 1) for each TH until you get enough to match the column you desire:
http://jsfiddle.net/TrueBlueAussie/zrccq447/5/
$('#table9').on('click', 'td:not(:nth-child(1))', function () {
var td = $(this);
var clicked_pos = td.index();
var cols = 0;
var $table = td.closest('table');
var $ths = $table.find('tr th');
for (var i = 1; i < $ths.length; i++) {
var $th = $ths.eq(i);
cols += ~~$th.attr('colspan') || 1;
if (cols >= clicked_pos) {
var x = $th.text();
alert(x);
break;
}
}
});
I tried to keep it generic, so it finds the appropriate table and headers on the fly.
One approach is to get store a reference to each TH, in order, in an array and call the text from the array based on the location of the td.
var thholder = $('table th'),
th = [];
for(var i = 0; i < thholder.length; i++) {
var thi = $(thholder[i]);
for(var j = 0; j < (thi.attr('colspan') || 1); j++) {
th.push(thi);
}
}
$('#table9').on('click', 'td:not(:nth-child(1))', function () {
var td = $(this);
var clicked_pos = td.index();
alert(th[clicked_pos].text());
});
http://jsfiddle.net/zrccq447/3/
This code is not optimised, but shows the approach:
Loop through all the TH in the table.
If the TH does not have the attribute 'colspan', then set the attribute to a value of 1.
Create a loop for each value of colspan and save a reference to the current TH in the array.
When you click on a TD, get it's clicked position and retrieve the text of the TH at that position in the array and alert it :)