We Keep Coding

How to exclude thead , tfoot, and input[type=checkbox] from HTML using jquery?

I'm generating JSON from the below table. Currently, I am able to exclude <thead> but as well as I want to exclude <tfoot> and input type checkbox or each row's first cell that input type is checkbox using JQuery any hint?
$('#createJSON').click(function() {
$('#main-div .component-base').each(function() {
console.log(this);
// console.log($(this));
if ($(this).data('component-type') == 'aggregator') {
console.log('Process Agg');
var newFormData = [];
jQuery('#aggregator-table tr')
.not('thead tr')
.each(function(i) {
var tb = jQuery(this);
console.log(tb);
var obj = {};
tb.find('input').each(function() {
obj[this.name] = this.value;
});
obj['row'] = i;
newFormData.push(obj);
});
console.log(newFormData);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
<table id="aggregator-table" class="component-base" data-component-type="aggregator">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th>Select</th>
<th>Column Name</th>
<th>Function</th>
<th>Alias</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record" /></td>
<td>
<input id="column-name" name="column-name" placeholder="Column Name" />
</td>
<td>
<input id="function" name="function" placeholder="Function" />
</td>
<td>
<input id="alias" name="alias" placeholder="Alias" />
</td>
<td>
<input id="order" name="order" placeholder="Order" />
</td>
</tr>
<tr></tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="add-record" style="margin:
1%;">
Add Properties
</button>
</td>
<td>
<button class="delete-component" style="margin: 1%;">
Delete Table
</button>
</td>
<td>
<button class="delete-record-aggregator" style="margin: 1%;">
Delete Record
</button>
</td>
</tr>
</tfoot>
</table>
</div>

You can exclude the <tfoot> <tr> by adding it to your not() selector .not('thead tr') like this: .not('thead tr, tfoot tr') and exclude the checkbox input by using not() at your each() function tb.find('input').each() like this: tb.find('input:not(input[type="checkbox"])').each().
$('#createJSON').click(function() {
$('#main-div .component-base').each(function() {
if ($(this).data('component-type') == 'aggregator') {
var newFormData = [];
jQuery('#aggregator-table tr')
.not('thead tr, tfoot tr')
.each(function(i) {
var tb = jQuery(this);
var obj = {};
tb.find('input:not(input[type="checkbox"])').each(function() {
obj[this.name] = this.value;
});
obj['row'] = i;
newFormData.push(obj);
});
console.log(newFormData);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
<table id="aggregator-table" class="component-base" data-component-type="aggregator">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th>Select</th>
<th>Column Name</th>
<th>Function</th>
<th>Alias</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record" /></td>
<td>
<input id="column-name" name="column-name" placeholder="Column Name" />
</td>
<td>
<input id="function" name="function" placeholder="Function" />
</td>
<td>
<input id="alias" name="alias" placeholder="Alias" />
</td>
<td>
<input id="order" name="order" placeholder="Order" />
</td>
</tr>
<tr></tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="add-record" style="margin:
1%;">
Add Properties
</button>
</td>
<td>
<button class="delete-component" style="margin: 1%;">
Delete Table
</button>
</td>
<td>
<button class="delete-record-aggregator" style="margin: 1%;">
Delete Record
</button>
</td>
</tr>
</tfoot>
</table>
</div>

Select the first html table row on page load using JS or JQUERY

Can someone help to select the the first row of my html table on page load using jquery or javascript.
after the page loads, it should select/highlight the first row and put all of the data from the selected row to the input boxes.
Here is my HTML CODE
HTML
<table id="tblCases">
<thead>
<tr>
<th>CASE KEY</th>
<th>DEPARTMENT CASE</th>
<th>DEPARTMENT</th>
<th style="display: none;">DEPT CODE</th>
<th style="display: none;">CHARGE</th>
<th>OFFENSE CODE</th>
<th>LAB CASE</th>
<th>INCIDENT REPORT DATE</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>
<b>Case Details</b>
</p>
<table>
<tr>
<td>
Department Case
</td>
<td>
<input type="text" name="Department Case #" id="txtDepartmentCase" value="" />
</td>
</tr>
<tr>
<td>
Department
</td>
<td>
<select id="drpDepartment">
</select>
</td>
</tr>
<tr>
<td>
Charge
</td>
<td>
<select id="drpCharge">
</select>
</td>
</tr>
<tr>
<td>
Lab Case
</td>
<td>
<input type="text" name="Lab Case" id="txtLabCase" value="" />
</td>
</tr>
<tr>
<td>
Incident Report Date
</td>
<td>
<input type="text" name="Incident Report Date" id="txtIncidentReportDate" value="" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="Case key" id="txtCaseKey" value="" />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<input type="button" value="Edit" id="btnEdit" onclick="" />
</td>
<td>
<input type="button" value="Save" id="btnSave" onclick="SaveData(); this.form.reset();" />
</td>
<td>
<input type="button" value="Cancel" id="btnCancel" onclick="" />
</td>
</tr>
</table>
Here is my JS CODE, Here I include the onclick selection on the html table and also I include the function for populating the input boxes with the data from the selected row.
Javascript/jquery
$(function () {
///<summary> Highlights the row when selected</summary>
///<param name="editing" type="text">Editing state</param>
///<returns type="text"></returns>
$('#tblCases tr').click(function () {
if (isEditing) {
return;
}
$('#tblCases tr').removeClass('selectedRow');
$(this).addClass('selectedRow');
});
});
var table = document.getElementById("tblCases");
var rIndex;
for (var i = 1; i < table.rows.length; i++) {
///<summary>Display selected row data in text input.</summary>
///<param name="editing" type="text">Editing state</param>
/// <returns type="text"></returns>
table.rows[i].onclick = function () {
if (isEditing) {
return;
}
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementById("txtCaseKey").value = this.cells[0].innerHTML;
document.getElementById("txtDepartmentCase").value = this.cells[1].innerHTML;
document.getElementById("drpDepartment").value = this.cells[3].innerHTML;
document.getElementById("drpCharge").value = this.cells[5].innerHTML;
document.getElementById("txtLabCase").value = this.cells[6].innerHTML;
document.getElementById("txtIncidentReportDate").value = this.cells[7].innerHTML;
};
}
function setEditingState(editing) {
///<summary>Defines the editing state which inlcude the behavior of buttons, input fields and row selection if a certain button was clicked</summary>
///<param name="editing" type="button; text">Editing state</param>
isEditing = editing;
// Disable or enable fields.
$('#txtDepartmentCase').attr('disabled', !editing);
$('#drpDepartment').attr('disabled', !editing);
$('#drpCharge').attr('disabled', !editing);
$('#txtLabCase').attr('disabled', !editing);
$('#txtIncidentReportDate').attr('disabled', !editing);
// Disable or enable buttons.
$('#btnEdit').attr('disabled', editing);
$('#btnSave').attr('disabled', !editing);
$('#btnCancel').attr('disabled', !editing);
}

Here's something to get you started:
var first_name = $('#source_table').find('tbody tr:first td:first').text();
var last_name = $('#source_table').find('tbody tr:first td:nth-child(2)').text();
var age = $('#source_table').find('tbody tr:first td:nth-child(3)').text();
$('#first_name').val(first_name);
$('#last_name').val(last_name);
$('#age').val(age);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table" border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Hunt</td>
<td>20</td>
</tr>
<tr>
<td>Jane</td>
<td>Middletow</td>
<td>19</td>
</tr>
</tbody>
</table>
<br/>
<table>
<tr>
<td>First Name :</td>
<td><input type="text" id="first_name"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" id="last_name"></td>
</tr>
<tr>
<td>Age :</td>
<td><input type="text" id="age"></td>
</tr>

How to select last row of a table?

I have the following div:
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
How do I make it select the last row of it with javascript or jquery? I've tried doing it like this
$("[.OrderList][tr:last]").focus();
But with no success

Use this code:
.OrderList >.table > tbody > tr:last-child { background:#ff0000; }

Try this :
$('#yourtableid tr:last').attr('id');
or this:
$("#TableId").find("tr").last();
Hope this if helpful :)

console.log($(".OrderList tr").last().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>

Try this code You can achieve it by:
$('#first table:last tr:last')

$('#yourtableid tr:last').attr('id').focus();
or
$('#yourtableid tr:last')[0].focus();
should work.

console.log($(".OrderList table tr:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>

Javascript for adding table row after user input

I am trying to create a bill calculator that requires user input of their bill type and cost (i will get on to all the calculations after).
At the minute i have got a bootstrap table which is currently 3 rows.
My question is how do i get a new row for each time the user enters their input?
I have a "Bill type field" where the user would enter the type of bill they have.
Then i have the "Amount" for the user to enter how much it will cost.
Finally i have the "Have Paid?" button where the user would click to finish the bill.
Onclick of that button, i would like a new row to be inserted.
Any help would be very much appreciated.
This is my current HTML:
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content" ">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
Thanks!

Just to start, see following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody id="myGrid">
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
<script>
$(".yesBtn").click(function(){
var name = $("#billType1").val();
var amount = $("#amountType1").val();
$("#myGrid").append("<tr><td>" + name + "</td><td>" + amount + "</td></tr>")
$("#billType1").val("");
$("#amountType1").val("");
});
</script>
</body>
</html>

Let assume that your button has id="havePaidButton" and your table id="billTable" and the fields have ids billType, amount and isPaid, respectively.
Your code in the jQuery should look like this:
$('#havePaidButton').off().on('click', function() {
('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>');
});

Javascript :not selector not working

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?

The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>

After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}