Develop Reference

How to disable button after reaching condition in laravel

I am using laravel and stuck in a condition. i add counter and a condition that when counter equals to 4 disable the button and no more item added.
this is my code
var increment = 0;
$(document).ready(function(){
$(".compare").click(function(){
increment++;
document.getElementById('compare').innerHTML = "";
document.getElementById('compare').innerHTML = "Compare (" +increment+")";
if(increment == 4)
{
var array = document.getElementsByClassName('compare');
for (var i = 0 ; i < array.length ; i++)
{
array[i].setAttribute('disabled','');
}
}
i want's to disable button after reaching the limit and no more item added from anywhere if the counter equals to 4.

var increment = 0;
$(document).ready(function() {
$(".compare").click(function() {
increment++;
document.getElementById('compare').innerHTML = "";
document.getElementById('compare').innerHTML = "Compare (" + increment + ")";
if (increment == 4) {
var array = document.getElementsByClassName('compare');
for (var i = 0; i < array.length; i++) {
array[i].setAttribute('disabled', '');
}
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="compare" id="compare">INCREMENT</button>

Not really Laravel related, but you don't need jQuery just to add a counter. Vanilla JS gets the job done:
<button id="btn" onclick="buttonCheck()">Click me</button>
<script>
var counter = 0;
function buttonCheck(){
counter++;
if (counter >= 4)
document.getElementById("btn").setAttribute("disabled", "disabled");
}
</script>

Seeing that you already have jQuery in your code. I'll give an example using jQuery.
var increment = 0;
$(document).ready(function(){
$(".compare").click(function(){
increment++;
document.getElementById('compare').innerHTML = "";
document.getElementById('compare').innerHTML = "Compare (" +increment+")";
if(increment == 4)
{
$(".compare").prop("disabled", true);
//prop() is used to set attribute value of an html element
}
}
}
Most of the time, this would work. But in some cases that it won't, you could manipulate this with CSS.
var increment = 0;
$(document).ready(function(){
$(".compare").click(function(){
increment++;
document.getElementById('compare').innerHTML = "";
document.getElementById('compare').innerHTML = "Compare (" +increment+")";
if(increment == 4)
{
$(".compare").css("pointer-events", "none");
}
}
}

jQuery: Finding and counting elements that contain a variable

I have a long set of rows (tr) within a table.
I want to find each occurrence of 'M' within the third td, so I came up with this:
$(document).ready(function() {
function countInstance(needle) {
var count = 0;
$("table").find("TR TD:nth-child(3):contains(' "+needle+" ')").each(function() {
count += 1;
});
console.log(count);
};
countInstance("M");
});
But the console doesn't return a modified count. Ideally I want to search and count occurrences of other variables within other td elements as well, logging each of them to a variable or pushing them to an array.
EDIT:
Mostly solved, but this appears to be slightly inaccurate.
$(document).ready(function() {
function countInstance(tdNum, needle) {
var count = 0;
$('table TR').find('TD:nth-child(' +tdNum+ '):contains(' +needle+ ')').each(function() {
count += 1;
});
console.log(count);
};
countInstance(3, 'M');
});

function countInstance(tdNum, needle) {
var contents = $("table tr").find("td:nth-child(" + tdNum + ")").text();
count = contents.split(needle).length - 1;
console.log(count);
};
var result1 = countInstance(3, "M");
function countInstance2(tdNum, needle) {
var count = 0;
$('table TR').find('TD:nth-child(' +tdNum+ '):contains(' +needle+ ')').each(function() {
count += 1;
});
console.log(count);
};
var result2 = countInstance2(3,"M");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>MMMMMMMMM</td>
<td>MMMMMMMM</td>
<td>MMMMMMM</td>
</tr>
</table>
<div id="one"></div>
<div id="two"></div>
$(document).ready(function() {
function countInstance(tdNum, needle) {
var contents = $("table tr").find("td:nth-child(" + tdNum + ")").text();
count = contents.split(needle).length - 1;
console.log(count);
};
countInstance(3, "M");
});

Add alphabets dynamically as html row increments

How to ensure i have a dynamic increment of Alphabets in a new cell on left side, next to each cell in a row which is dynamically created based on the option chosen in Select. This newly generated alphabet will be considered as bullet points/serial number for that particular row's text box.
jsfiddle
js code
$(document).ready(function(){
var select = $("#Number_of_position"), table = $("#Positions_names");
for (var i = 1; i <= 100; i++){
select.append('<option value="'+i+'">'+i+'</option>');
}
select.change(function () {
var rows = '';
for (var i = 0; i < $(this).val(); i++) {
rows += "<tr><td><input type='text'></td></tr>";
}
table.html(rows);
});
});
html
<select id="Number_of_position">
</select> <table id="Positions_names">
</table>

This is essentially a base26 question, you can search for an implementation of this in javascript pretty easily - How to create a function that converts a Number to a Bijective Hexavigesimal?
alpha = "abcdefghijklmnopqrstuvwxyz";
function hex(a) {
// First figure out how many digits there are.
a += 1; // This line is funky
var c = 0;
var x = 1;
while (a >= x) {
c++;
a -= x;
x *= 26;
}
// Now you can do normal base conversion.
var s = "";
for (var i = 0; i < c; i++) {
s = alpha.charAt(a % 26) + s;
a = Math.floor(a/26);
}
return s;
}
So you can do
$(document).ready(function(){
var select = $("#Number_of_position"), table = $("#Positions_names");
for (var i = 1; i <= 100; i++){
select.append('<option value="'+i+'">'+i+'</option>');
}
select.change(function () {
var rows = '';
for (var i = 0; i < $(this).val(); i++) {
rows += "<tr><td>" + hex(i) + "</td><td><input type='text'></td></tr>";
}
table.html(rows);
});
});
Heres the example http://jsfiddle.net/v2ksyy7L/6/
And if you want it to be uppercase just do
hex(i).toUpperCase();
Also - this will work up to any number of rows that javascript can handle

if i have understood you correctly, that's maybe what you want:
http://jsfiddle.net/v2ksyy7L/3/
I have added an array for the alphabet:
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
and then added the output to your "render" loop:
rows += "<tr><td>" + alphabet[i] + " <input type='text'></td></tr>";

Merge equal table cells with jQuery

Simple html table with NxM values.
The aim is to merge equal cells in column with jQuery.
Note, that in one row there are no duplicates.
I got how to hide the equal cells, but is there any way to combine a cell with data with an empty cell in one?
html:
<table border="1" id="testTable">
<tr>
<td>First</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
<td>S</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
<td>H</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
<td>E</td>
</tr>
</table>
js:
var seenArray = {};
$('#testTable td').each(function()
{
var index = $(this).index();
var txt = $(this).text();
if (seenArray[index] === txt)
{
$(this).text(''); //I think here should be "marging"
}
else
{
seenArray[index] = txt;
}
});
jsFiddle
P.S. One more thing, the data originally is retrieved in json array, then I do .parseJSON() first and put data in table using:
for (var i = 0; i < obj.length; i++)
{
tr = $('<tr/>');
tr.append("<td>" + obj[i]['columnA'] + "</td>");
tr.append("<td>" + obj[i]['columnB'] + "</td>");
tr.append("<td>" + obj[i]['columnC'] + "</td>");
$('#testTable').append(tr);
}
UPD
alFReD NSH made a good solution for 2 cells. Here is his solution.
But, if there will be more than 2 equal cells.

If I get what you mean here, this my edited version: http://jsfiddle.net/djhU7/4/
So instead of $(this).text('') I did this:
$($this.parent().prev().children()[index]).attr('rowspan', 2);
$this.hide();
What I did, was the I set the rowspan of first cell to 2. This attribute "will indicates for how many rows the cell extends." which will make the above cell twice bigger, and I hid the cell with the duplicate information so the extra cell will go away. Note that removing the cell will ruin the index check for the next cell. This was a just a quick and dirty solution but rowspan attribute has to be used somewhere to achieve it.
Here's another version, that sets rowspan on the time when inserting the cells into the table, beside the fact that it works with 3 duplicate cells and more, it's also faster, because it avoids re-rendering of the table(though it can be optimized more, but I don't think at this moment you wanna care about it, premature optimization is the root of all evil!): http://jsfiddle.net/g7uY9/1/
for (var i = 0; i < obj.length; i++) {
tr = $('<tr/>');
addColumn(tr, 'columnA', i);
addColumn(tr, 'columnB', i);
addColumn(tr, 'columnC', i);
$('#testTable').append(tr);
}
function addColumn(tr, column, i) {
var row = obj[i],
prevRow = obj[i - 1],
td = $('<td>' + row[column] + '</td>');
if (prevRow && row[column] === prevRow[column]) {
td.hide();
} else {
var rowspan = 1;
for (var j = i; j < obj.length - 1; j++) {
if (obj[j][column] === obj[j + 1][column]) {
rowspan++;
} else {
break;
}
}
td.attr('rowspan', rowspan);
}
tr.append(td);
}

Please find the improved answer for your query with row expand/collapse. Here is my fiddle:
function MergeGridCells()
{
var dimension_cells = new Array();
var dimension_col = null;
var i = 1;
// First, scan first row of headers for the "Dimensions" column.
$("#mytable").find('th').each(function () {
if ($(this).text() == 'Id') {
dimension_col = i;
}
i++;
});
// first_instance holds the first instance of identical td
var first_instance = null;
var rowspan=1;
// iterate through rows
$("#mytable").find('tr.parent-grid-row').each(function () {
// find the td of the correct column (determined by the dimension_col set above)
var dimension_td = $(this).find('td.parent-grid-column:nth-child(' + dimension_col + ')');
if (first_instance == null) {
// must be the first row
first_instance = dimension_td;
} else if (dimension_td.text() == first_instance.text()) {
// the current td is identical to the previous
// remove the current td
dimension_td.remove();
++rowspan;
// increment the rowspan attribute of the first instance
first_instance.attr('rowspan', rowspan);
} else {
// this cell is different from the last
first_instance = dimension_td;
rowspan=1;
}
});
}
Jquery Cell Merging

Here's a runnable version of carla's answer:
function SummerizeTable(table) {
$(table).each(function() {
$(table).find('td').each(function() {
var $this = $(this);
var col = $this.index();
var html = $this.html();
var row = $(this).parent()[0].rowIndex;
var span = 1;
var cell_above = $($this.parent().prev().children()[col]);
// look for cells one above another with the same text
while (cell_above.html() === html) { // if the text is the same
span += 1; // increase the span
cell_above_old = cell_above; // store this cell
cell_above = $(cell_above.parent().prev().children()[col]); // and go to the next cell above
}
// if there are at least two columns with the same value,
// set a new span to the first and hide the other
if (span > 1) {
// console.log(span);
$(cell_above_old).attr('rowspan', span);
$this.hide();
}
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="SummerizeTable('#table1')">Summerize</button>
<table id="table1" border="1" cellspacing="0" >
<thead>
<tr>
<th>State</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>VT</td>
<td>Burlington</td>
<td>Elm</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Main</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Oak</td>
</tr>
<tr>
<td>NY</td>
<td>Albany</td>
<td>State</td>
</tr>
</tbody>
</table>

I really liked Farid first solution, but I needed to select the range of lines and which columns it would be applied, so I made a few modifications (including the possiblity of more than 2 cells merge). http://jsfiddle.net/djhU7/72/
function Merge_cells($id_table,$lin_ini,$lin_fim,$array_col=array()){
$colunas="";
for($k=0;$k<count($array_col);$k++) $colunas=$colunas . " col =='$array_col[$k]' ||";
if(count($array_col)>0) $colunas="(".substr($colunas,0,-3).") &&";
echo "<script>
$('#$id_table td').each(function()
{
var \$this = $(this);
var col = \$this.index();
var txt = \$this.text();
var row = $(this).parent()[0].rowIndex;
//define the interval of lines and columns it will look at
if((col==0 || col==1 || col==2) row>=firstRow && row<=lastRow){
span=1;
cell_above = $(\$this.parent().prev().children()[col]);
//look for cells one above another with the same text
while(cell_above.text()=== txt){ //if the text is the same
span+=1; //increase the span
cell_above_old = cell_above; //store this cell
cell_above = $(cell_above.parent().prev().children()[col]); //and go to the next cell above
}
//if there are at least two columns with the same value, set a new span to the first and hide the other
if(span>1) {
console.log(span);
$(cell_above_old).attr('rowspan',span);
\$this.hide();
}
}
});
</script>";
}

I extended carla's solution.
With two functions, we can merge horizontally or vertically
and exclude or include cells to merge.
try the working sample. https://jsfiddle.net/bn3u63pe
/*
* merge horizontally
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByCol(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative to go to the end of cols
) {
/*
console.log('autoMergeByCol tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('rowspan')) {continue;}
var cellNext = $($(theCell).parent().children()[colIndex + span]);
while(cellNext != undefined
&& $(theCell).text() == $(cellNext).text()
&& colIndex + span <= colEnd ) {
span++;
cellNext.hide();
cellNext = $($(cellNext).parent().children()[colIndex + span]);
}
if(span > 1) $(theCell).attr('colspan', span);
}
}
}
/*
* merge vertically
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByRow(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative
) {
/*
console.log('autoMergeByRow tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('colspan')) {continue;}
var cellBelow = $($(theCell).parent().next().children()[colIndex]);
while(cellBelow != undefined
&& $(theCell).text() == $(cellBelow).text()) {
span++;
cellBelow.hide();
cellBelow = $($(cellBelow).parent().next().children()[colIndex]);
}
if(span > 1) $(theCell).attr('rowspan', span);
}
}
}

$(document).ready(function () {
SummerizeTable($('#example'));
})
function SummerizeTable(table) {
$(table).each(function () {
$(table).find('td').each(function () {
var $this = $(this);
var col = $this.index();
var html = $this.html();
var row = $(this).parent()[0].rowIndex;
var span = 1;
var cell_above = $($this.parent().prev().children()[col]);
while (cell_above.html() === html) {
span += 1;
cell_above_old = cell_above;
cell_above = $(cell_above.parent().prev().children()[col]);
}
if (span > 1) {
$(cell_above_old).attr('rowspan', span);
$this.hide();
}
});
});
}
See Working Example here.

jQuery: How to count table columns?

Using jQuery, how would you figure out how many columns are in a table?
<script>
alert($('table').columnCount());
</script>
<table>
<tr>
<td>spans one column</td>
<td colspan="2">spans two columns</td>
<td colspan="3">spans three columns</td>
<tr>
</table>
The total number of columns in this example is 6. How could I determine this using jQuery?

Here you go:
jsFiddle
$(function() {
var colCount = 0;
$('tr:nth-child(1) td').each(function () {
if ($(this).attr('colspan')) {
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
});

$("table").find("tr:first td").length;
I edited as I didn't realize you were counting the colspan's.
If you want to include using colspan try a loop through the td's in the first row:
var cols = $("table").find("tr:first td");
var count = 0;
for(var i = 0; i < cols.length; i++)
{
var colspan = cols.eq(i).attr("colspan");
if( colspan && colspan > 1)
{
count += colspan;
}else{
count++;
}
}

This is the cleanest in my opinion. It handles tables within tables. And is short and simple:
$("table > tbody > tr:first > td").length

In POJS (Plain Old JavaScript):
HTML:
<table id="foo">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="3">3</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
JS:
var foo = document.getElementById("foo"), i = 0, j = 0, row, cell, numCols = 0;
//loop through HTMLTableElement.rows (includes thead, tbody, tfoot)
for(i;i<foo.rows.length;i++)
{
row = foo.rows[i];
//loop through HTMLTableRowElement.cells
for(j = 0;j<row.cells.length;j++)
{
cell = row.cells[j];
numCols += cell.colSpan;
cell = null;
}
row = null;
}
alert(numCols) //6;
HTMLTableElement.rows will collect rows from every HTMLTableSectionElement (THead, TBody, and TFoot). Each section also has its own rows HTMLCollection, so you can filter them if need be.

To be robust..I'd do something like this
alert(numCol("table") + " is the max number of cols");
function numCol(table) {
var maxColNum = 0;
var i=0;
var trs = $(table).find("tr");
for ( i=0; i<trs.length; i++ ) {
maxColNum = Math.max(maxColNum, getColForTr(trs[i]));
}
return maxColNum;
}
function getColForTr(tr) {
var tds = $(tr).find("td");
var numCols = 0;
var i=0;
for ( i=0; i<tds.length; i++ ) {
var span = $(tds[i]).attr("colspan");
if ( span )
numCols += parseInt(span);
else {
numCols++;
}
}
return numCols;
}
Just in case we have some funkiness going on between different rows.

http://jsfiddle.net/WvN9u/
Just paying attention to colspan attr

Pass in a table with something like $('foo#table') or $('table:first')
function getColumnCount(e) { //Expects jQuery table object
var c= 0;
e.find('tbody tr:first td').map(function(i,o) { c += ( $(o).attr('colspan') === undefined ? 1 : parseInt($(o).attr('colspan')) ) } );
return c;
}

To circumvent the td/th issue (and also fix a potential issue where attr('colspan') was giving me strings) I went with this:
var colspan = 0;
$('#table').find('tr:first').children().each(function(){
var cs = $(this).attr('colspan');
if(cs > 0){ colspan += Number(cs); }
else{ colspan++; }
});

/**
* Get number of columns in table.
* #param {string} table jQuery selector
* #param {boolean} [malformed=false] whether to inspect each row of malformed table;
* may take some time for large tables
* #returns {?number} number of columns in table, null if table not found.
*/
function getTableColumnsCount(table, malformed) {
malformed = malformed || false;
var $table = $(table);
if (!$table.length) {
return null;
}
var rows = $table.children('thead, tfoot, tbody').children('tr');
if (!malformed) {
// for correct tables one row is enough
rows = rows.first();
}
var maxCount = 0;
rows.each(function () {
var currentCount = 0;
$(this).children('th, td').each(function () {
currentCount += this.colSpan;
});
maxCount = Math.max(maxCount, currentCount);
});
return maxCount;
}
See in action https://jsfiddle.net/kqv7hdg5.
Takes colspan into account.
Works for nested tables.
Works for <thead>, <tfoot>, <tbody>.
Works for mix of <th> and <td>.
Works for malformed tables.
Slightly modified version for those who would like to pass jQuery object instead of selector https://jsfiddle.net/5jL5kqp5.

You have to set an ID to the header row:
<table>
<tr id="headerRow">
<td>spans one column</td>
<td colspan="2">spans two columns</td>
<td colspan="3">spans three columns</td>
</tr>
</table>
And then you can use the following function:
function getColumnCount(headerRowId) {
var columnCount = 0;
$('#' + headerRowId + ' > td').each(function() {
var colspanValue = $(this).attr('colspan');
if (colspanValue == undefined) {
columnCount++;
} else {
columnCount = columnCount + parseInt(colspanValue);
}
});
return columnCount;
}

I simplified answer of Craig M.
And modified to apply to both td and th tag.
function GetColumnCount($Table)
{
var ColCount = 0;
$Table.find("tr").eq(0).find("th,td").each(function ()
{
ColCount += $(this).attr("colspan") ? parseInt($(this).attr("colspan")) : 1;
});
return ColCount;
}

var foo = document.getElementById("price-test-table")
foo.tBodies["0"].firstElementChild.children.length
Give your table an id name
Assume your rows all have the same amount of columns and you have a table body
Use above code, which I think is the simplest on here, similar to first answer
but provides a little more detail

With jQuery and reduce it could look like this:
$.fn.tableCellCount = function() {
return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
return a + ($(b).attr('colspan') ? parseInt($(b).attr('colspan')) : 1);
},0)
}
$('table').tableCellCount();
Or even simpler:
$.fn.tableCellCount = function() {
return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
return a + (b.colSpan ? parseInt(b.colSpan) : 1);
},0)
}
$('table').tableCellCount();

This is the simple solution I have done:
In case you are using TR change TH for TR.
Using JQUERY:
<script>
$(document).ready(function() {
var number = $("table > tbody > tr:first > th").length;
for(var i=0; i <= number; i++){
$('th:nth-child('+ i +')').hide();
}
});
</script>

One Line:
$('.table-responsive tr th').children().length;

function(){
num_columns = 0;
$("table td]").each(function(){
num_columns = num_columns + ($(this).attr('colspan') == undefined ? 1 : $(this).attr('colspan'));
});
return num_columns;
}