Get Current Selected Checkbox value using jQuery - javascript

I need to get current selected value from selected check box from table.Below the code i am using for get selected value from checkbox.But It is getting all the selected value from table.I need only selected table row value.
$.each($('input[type="checkbox"]:checked').closest("td").next("td"), function() {
values.push($(this).text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall-custom" onclick="selectAllCustom(this)" />SA</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
</td>
<td id="macadd" style="word-break:break-all;">
Mac1
</td>
<td style="word-break:break-all;">
Dev 1
</td>
<td style="word-break:break-all;">
Model 1
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
</td>
<td id="macadd" style="word-break:break-all;">
Mac 2
</td>
<td style="word-break:break-all;">
Parm 2
</td>
<td style="word-break:break-all;">
Model 2
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
</tbody>
</table>

Give your TDs a class instead of ID
I do not know what you want to click, but here I do it on click of the checkbox
$(function() { // assuming jquery is loaded, execute on page load
$("#check_selectall-custom").on("click", function() {
var checked = this.checked;
$("input[type=checkbox]").not(this).prop("checked",checked);
});
$("#getval").on("click", function() {
var values = $("input[type=checkbox]:checked").not(this).map(function() {
return $(this).closest("tr").find(".macadd").text().trim();
}).get();
$("#res").html(values.join("<br/>"))
});
});
#tr_device_id1 td {
word-break: break-all
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<label><input type="checkbox" id="check_selectall-custom" />SA</label>
</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" name="checkBox[]">
</td>
<td class="macadd">
Mac 1
</td>
<td class="device">
Dev 1
</td>
<td class="model">
Model 1
</td>
<td class="Selected_Device">
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" name="checkBox[]">
</td>
<td class="macadd">
Mac 2
</td>
<td class="device">
Dev 2
</td>
<td class="model">
Model 2
</td>
<td class="Selected_Device">
</td>
</tr>
</tbody>
</table>
<button type="button" id="getval">Show checked</button>
<span id="res"></span>

var TotalChkBx;
$("input:checkbox").on("click", function() {
var n = $("input:checkbox").index(this);
$('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
$('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
$('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
$('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
});
function CheckAll(CheckBox) {
$('#detail').html("");
var TargetBaseControl = document.getElementById("DeviceTable"); // objRef.parentNode.parentNode.parentNode;
var TargetChildControl = "check";
//var Check_TEXT = "CHECK_CheckBox"
var Inputs = TargetBaseControl.getElementsByTagName("input");
// var Spans = TargetBaseControl.getElementsByTagName("span");
for (var n = 0; n < Inputs.length; ++n) {
if ((Inputs[n].type === 'checkbox')) //
{
Inputs[n].Checked = CheckBox.checked;
$("#" + Inputs[n].id).attr("Checked", CheckBox.checked);
$('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
$('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
$('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
$('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
}
// else { $('#detail').html("");}
}
Counter = CheckBox.checked ? TotalChkBx : 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check1" name="checkBox" id="check_selectall-custom" onclick="CheckAll(this)" />SA</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" id="check2" name="checkBox">
</td>
<td id="macadd" style="word-break:break-all;">
Mac1
</td>
<td style="word-break:break-all;">
Dev 1
</td>
<td style="word-break:break-all;">
Model 1
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" id="check3" name="checkBox">
</td>
<td id="macadd" style="word-break:break-all;">
Mac 2
</td>
<td style="word-break:break-all;">
Parm 2
</td>
<td style="word-break:break-all;">
Model 2
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
</tbody>
</table>
<div id="detail"></div>

Related

Filter Table per columb

I have code here which filtering table doesn't work, then I want the status filter with checkbox, what I have to do?, please help me!
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px">200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2013
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px">500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px">2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px">6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px">2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px">1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
Thank you in advance!
What you have done in your javaScript / Jquery side is correct. You missed to add the relevant class names to your HTML. I added classes for year (and I made a change to have 2 records for 2012) and allocation and it seems working.
Try searching with year = 2012 and allocation = 200000
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
I have changed code and working for status as well
fiddle: https://codepen.io/creativedev/pen/yEOPbz
$(document).ready(function(){
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
});
var len = $i.length;
if (len === 0)
return $rows.show();
var cls = '.' + $i.map(function () {
return this.className;
}).get().join(',.');
if(cls.indexOf(",") > -1){
var array = cls.split(",");
$.each(array,function(i){
$rows.hide().filter(function () {
return $('td', this).filter(function () {//console.log(this);
var content = this.textContent,
inputVal = $i.filter(array[i]).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length == len;
}).show();
});
}else{
$rows.hide().filter(function () {
return $('td', this).filter(function () {
var content = this.textContent,
inputVal = $i.filter(cls).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
}
});
});

How to sort the rows of a table dynamically based on data-sort attribute in tr tag when its value changes

I have a table and I want to sort the rows by the user,Each row contains one input, for enter a row number. Here rows are sorted by data-sort Attribute in tr and each input has a rownum attribute whose value is equal to the value of the tr data-sort attribute.There are 6 rows here. We want to take the input value of each row, and move that row there, and the values of the attributes are the same as the input.For example, if you enter 1 in the input of one of the rows, that row will be our first row.
The following code runs for the first time, but after moving one of the rows does not work anymore.When its value changes. where is my mistake?
jsfiddle
$('.m').on('change', function () {
var Des = parseInt($(this).val());
var RowNum = parseInt($(this).attr('rownum'));
$('tr[data-sort="' + RowNum + '"]').attr('data-sort', -100);
$('input[rownum="' + RowNum + '"]').attr('rownum', -100);
if (Des > RowNum) {
for (var i = RowNum + 1; i <= Des; i++) {
var newVal = i - 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
if (Des < RowNum) {
for (var i = Des + 1; i <= (RowNum - 1); i++) {
var newVal = i + 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
$('tr[data-sort="-100"]').attr('data-sort', Des);
$('input[rownum="-100"]').attr('rownum', Des);
var divList = $("tr");
divList.sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
as you rebuild and replace html piece of code on which you have your listener, you have to rebind event listener to the new created elements with class "m". Something as below (not elegant,only here to show a working example - and you don't need all your test. You just need to assign input value to data-sort attribut and then reorder with sort function)
$('.m').on('change', function (evt) {
changeOrder(evt);
})
function changeOrder(evt){
$this=$(evt.currentTarget);
var Des = parseInt($this.val());
var RowNum = parseInt($this.attr('rownum'));
$this.parent().parent().data("sort",Des)
var divList = $("tbody").find("tr").sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
$('.m').on('change', function (evt) {
changeOrder(evt);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>

A little calculation

With this code, how do I put multiplication * to make #ttc = #totalcout * #marge
When I click on the checkboxes, I manage to make the additions, but I can not integrate the multiplication to do the TTC
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>
After you have calculated your new total, multiple that times marge and update #ttc with that newly calculated value.
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
// Now that you've recalculated the total, multiply that times 'marge' and insert that into '#ttc'
const marge = parseFloat($("#marge").html());
$("#ttc").html(parseFloat(total) * marge + ' €');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value=5>5</input>
<input type="checkbox" value=10>10</input>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap
i have a code that is returning only the first header cell name the script code is as bellow
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert("header=" + rowheader.innerHTML);
});
HTML is as bellow
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4" class="displaysingledata>row1</td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2" class="displaysingledata"></td>
<td id="1_3"></td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7" class="displaysingledata"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10" class="displaysingledata">row2</td>
<td id="2_0"></td>
<td id="2_1" class="displaysingledata"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displayMultipledata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells
You can use the colspan to define the number of headers you'll need.
Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan = $(this).attr('colspan'),
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Alternativ that works on all cells
$('#example').on('click', 'td:not(:first-of-type)', function (e) {
var colspan = 1,
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
if( $(this).attr('colspan') ) {
colspan = $(this).attr('colspan');
}
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan_number = parseInt($(this).attr('colspan'));
var prevCells = $(this).prevAll();
var previousColSpan = 0;
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
previousColSpan += (parseInt($(this).attr('colspan'))-1);
}
});
var total_cells = 1;
if(parseInt(colspan_number)>0){
total_cells = colspan_number;
}
var rowheaders = '';
for(var i=0;i<total_cells;i++){
rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
}
alert("headers : \n" + rowheaders);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

Add a row to my table using Javascript and MVC

I have a table like this on my MVC view
<table class="PBHEP table table-bordered">
<thead>
<tr>
<th style="text-align: center">Compute PBHEP Offsets</th>
</tr>
</thead>
<tbody>
<tr>
<th style="text-align: center">Present Conditions</th>
</tr>
</tbody>
</table>
<table class="PDHEPparams table table-bordered">
<tbody>
<tr>
<th></th>
<th>Township</th>
<th>Range</th>
<th>Section</th>
<th>Crop</th>
<th>Acres</th>
</tr>
<tr id="rowtoadd">
<td style =" text-align:center">
<input type="button" class="btn btn-small btn-primary" value="+" onclick="addrow"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Township"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Range"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Section"></td>
<td style =" text-align:center">
<select></select></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Acres"></td>
</tr>
</tbody>
</table>
How do I add a new row to this table on the button click ? what should be my javascript function for the button onclick.
Here is the general idea of it.
$('.btn').on('click', function() {
var township = $('.input-small').eq(0).val();
var range = $('.input-small').eq(1).val();
var section = $('.input-small').eq(2).val();
var acres = $('.input-small').eq(3).val();
$('.PDHEPparams tbody').append("<tr><td>" + township + "</td><td>" + range + "</td><td>" + section + "</td><td>" + acres + "</td></tr>");
});
Here is a rough fiddle.

Categories