khemikal khemikal - 1 year ago 43
jQuery Question

JQuery/JavaScript - Increment parent rowspan by 1 and put first child cells underneath on click

I am attempting to make column one (assigned class) have its rowspan incremented by one on click. Also I am wanting basically all the contents under column two (which also has its own class) to basically go underneath column one when I click column one. Here is my JSFiddle if anyone has any advice I would be appreciative! Basically kind of like excel pivot table functionality if anyone is familiar with that.

$(function dotIt() {
$('.parent').on('click', function() {
var rowspan0 = $(this).attr('rowspan');
$(this).attr('rowspan', rowspan0 + 1);
// $(this).attr('rowspan').size() + 1;

basically after you click the parent, I would like it to look like this:

enter image description here

Answer Source

Your code is almost correct, except that the jquery document ready function is incorrect. It should be $(function(){ .... }) instead of $(funciton doIt(){ .... });. You need to convert the rowspan0 to int as the $(this).attr('rowspan') will return as string. You may refer to this jsfiddle