Hightlight text and change color

Hightlight text and change color - javascript

There
So basically I am new to programming, and I am working on something where you have a table in html, and I am using jquery to check if a certain field has a number, if it does then that row is highlight. Now I have code which works but the problem is I want it to highlight the background in red and change the text color to white, which works as well but the table I have has hyperlinks, which stay blue despite my code, so anybody can improve my code?
I want all the text to turn white, including the links with "href"
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

Find a tag in code and color it using css
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white');
$(this).parent().find('a').css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

use this type of javascript in your code change it
$(function () {
var $table = $('table'),
checkboxColumn = 0;
// checkboxes updates
$table.find('tbody').on('change', 'input', function () {
var $cell = $(this).closest('td');
// only accept checkboxes in the first column
if ($cell[0].cellIndex === checkboxColumn) {
$cell.closest('tr').toggleClass('checked', this.checked);
// update cache with checkbox state
$table.trigger('updateCell', [ $cell[0] ]);
}
});
$table.find('thead input').on('change', function(){
var chk = this.checked;
$table.find('tbody tr').each(function(){
$(this).find('td:eq(' + checkboxColumn + ') input')
.prop('checked', chk)
.trigger('change');
});
});
var headers = {};
headers[checkboxColumn] = { sorter: false };
$table.tablesorter({
widgets: ['zebra'],
headers: headers
});
});
try this demo
http://jsfiddle.net/eY8uH/767/

Currently, your adding style to the tr tag only but you will also need to add color style to the anchor tag as well or else the user-agent stylesheet will overwrite the style.
$(this).parent().css('color','white')
.find('a').css('color','white');
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white')
.find('a').css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

Related

Exporting html to Excel / CSV using tableExport, the exported file loses its formatting

i am to trying export a report data / html to excel / csv using tableExport with this code logic
$('#tblRpt').tableExport({ type: 'csv', escape: 'false', tableName:
'yourTableName' });
this code works in other reports which has simple html structure. The report which i am trying to export has nested tables in it. The exported file loses its html formatting. I don't have choice to use third party plugin because of project optimization issues.
Please suggest me a way to solve this issue without using any third party tool/plugin, Thank you
This is the html of my report which i am trying to export.
<tbody><tr>
<td colspan="2" class="no-border-right"><strong></strong></td>
<td align="right" valign="top" class="no-border-left">10/01/2020
10:53</td>
</tr>
<tr>
<td width="20%" class="no-border-right"><strong>User: Practical Head
Office</strong></td>
<td width="60%" align="center" class="no-border-left no-border-right">
<strong id="MidRptHeading">
M.I.D Report - Curent Fleet Only
</strong> (01 Dec 2019 - 31 Dec 2019)
</td>
<td width="20%" align="right" valign="top" class="no-border-left">
<strong></strong></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th valign="top"><strong>Reg no</strong></th>
<th valign="top"><strong>Insure type</strong></th>
<th valign="top"><strong>Make</strong></th>
<th valign="top"><strong>Model type</strong></th>
<th valign="top"><strong>Derivative</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Engine size</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Date of Registration</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Value</strong></th>
<th valign="top" style="text-align: center;"><strong>Seats</strong></th>
<th align="right" valign="top" style="text-align: center;"><strong>Gross vcl wt</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle on date</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle off date</strong></th>
<th valign="top"><strong>Location</strong></th>
<th valign="top" style="text-align: center;"><strong>VIN number</strong></th>
</tr>
</thead>
<tbody id="tblMidVehiclesList">
<tr>
<td valign="top">KP69WBZ</td>
<td valign="top">Car</td>
<td valign="top">NISSAN</td>
<td valign="top">QASHQAI</td>
<td valign="top">QASHQAI DIG-T TEKNA</td>
<td align="center" valign="top">1332</td>
<td align="center" valign="top">20/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">05/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">SJNFFAJ11U2647316</td>
</tr>
<tr>
<td valign="top">BJ69JXU</td>
<td valign="top">Car</td>
<td valign="top">PEUGEOT</td>
<td valign="top">Peugeot GTL 1.2 GT LINE</td>
<td valign="top">308 GT LINE PURETECH S/S</td>
<td align="center" valign="top">1200</td>
<td align="center" valign="top">27/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">10/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">VF3LPHNSJKS346785</td>
</tr>
<tr>
<td valign="top">KN69TGX</td>
<td valign="top">Van up to 3.5T</td>
<td valign="top">VOLKSWAGEN</td>
<td valign="top">Transporter T30</td>
<td valign="top">TRANSPORTER T30 H-LINE TD</td>
<td align="center" valign="top">1968</td>
<td align="center" valign="top">30/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">2</td>
<td align="center" valign="top">3000</td>
<td align="center" valign="top">12/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">WV1ZZZ7HZKH180620</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom: 1px solid #000; padding: 0;"></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="40%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td width="17%" valign="top"> </td>
<td width="14%" align="center" valign="top"><strong>At Start of Month</strong></td>
<td width="8%" align="center" valign="top"><strong>Current</strong></td>
</tr>
<tr>
<td valign="top"><strong>Owned vehicles</strong></td>
<td align="center" valign="top">21</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Leased vehicles</strong></td>
<td align="center" valign="top">38</td>
<td align="center" valign="top">3</td>
</tr>
<tr>
<td valign="top"><strong>Temporary vehicles</strong></td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Total fleet</strong></td>
<td align="center" valign="top"><strong>59</strong></td>
<td align="center" valign="top"><strong>3</strong></td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td align="left" valign="top"> </td>
<td align="center" valign="top"><strong>Current fleet</strong></td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Car</strong></td>
<td align="center" valign="top">2</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Minibus</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome up to 3.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>MPV</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van up to 3.5T</strong></td>
<td align="center" valign="top">1</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>HP Cars</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" align="center" style="border-top: 1px solid #000;"><strong>End of report</strong></td>
</tr>
</tbody>

Find text in <td> nth-child in jquery

I am trying to check text in <td> nth-child.
I did :
alert($(".ms-formtable tr:nth-child(7) td:nth-child(2):contains('New Scheduling')"));
Alert showing [object] [object]. How to get True/False?
alert($(".ms-formtable tr:nth-child(7) td:nth-child(2):contains('New Scheduling')"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Title"></a>EzLabor Code</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="EzLabor Code"
FieldInternalName="Title"
FieldType="SPFieldText"
-->
test
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Project_x0020_Title"></a>Project Description</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Project Description"
FieldInternalName="Project_x0020_Title"
FieldType="SPFieldText"
-->
test
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Date_x0020_Requested"></a>Request Date</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Request Date"
FieldInternalName="Date_x0020_Requested"
FieldType="SPFieldDateTime"
-->
5/8/2018
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Start_x0020_Date"></a>Due Date</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Due Date"
FieldInternalName="Start_x0020_Date"
FieldType="SPFieldDateTime"
-->
5/8/2018
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Marketing_x002f_Project_x0020_Ma"></a>Marketing/Project Manager</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldUserMulti">
<!-- FieldName="Marketing/Project Manager"
FieldInternalName="Marketing_x002f_Project_x0020_Ma"
FieldType="SPFieldUserMulti"
-->
<nobr><span class="ms-imnSpan"><span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10"><img title="" alt="No presence information" name="imnmark" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" showofflinepawn="1" src="/_layouts/15/images/spimn.png" sip="" id="imn0,type=sip"></span>
</span><span class="ms-noWrap ms-imnSpan"><img title="" alt="No presence information" name="imnmark" class="ms-hide" showofflinepawn="1" src="/_layouts/15/images/spimn.png" sip="" id="imn1,type=sip"><a onclick="GoToLinkOrDialogNewWindow(this); return false;" class="ms-peopleux-userdisplink ms-subtleLink" href="/dept/wc/_layouts/15/listform.aspx?PageType=4&ListId={4d24aff7-9486-4883-87e2-271651194a4c}&ID=21">Srikanth Vadlakonda</a></span></nobr>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Select_x0020_Here"></a>Type of Request (Please Select)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Type of Request (Please Select)"
FieldInternalName="Select_x0020_Here"
FieldType="SPFieldChoice"
-->
Training Course Page
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Training_x0020_Courses"></a>Training Courses (Please Select)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Training Courses (Please Select)"
FieldInternalName="Training_x0020_Courses"
FieldType="SPFieldChoice"
-->
New Scheduling of Training Course (includes details on left side)
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Is_x0020_this_x0020_a_x0020_Trai"></a>Is this a Training Course or Seminar?</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Is this a Training Course or Seminar?"
FieldInternalName="Is_x0020_this_x0020_a_x0020_Trai"
FieldType="SPFieldChoice"
-->
Training Course
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Title0"></a>Title</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Title"
FieldInternalName="Title0"
FieldType="SPFieldText"
-->
N/A
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Technical_x0020_Discipline_x0028"></a>Technical Discipline(s)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="Technical Discipline(s)"
FieldInternalName="Technical_x0020_Discipline_x0028"
FieldType="SPFieldMultiChoice"
-->
Completions
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Description"></a>Course Description (attach file if needed)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Course Description (attach file if needed)"
FieldInternalName="Description"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field">
<div dir="">
<div class="ExternalClass77CDADB3DBD54D56AE9F0B4497948B3E">
<p>N/A</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Learning_x0020_Level"></a>Learning Level</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Learning Level"
FieldInternalName="Learning_x0020_Level"
FieldType="SPFieldChoice"
-->
Introductory
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Course_x0020_Length"></a>Course Length</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Course Length"
FieldInternalName="Course_x0020_Length"
FieldType="SPFieldText"
-->
N/A
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Why_x0020_Attend"></a>Why Attend</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Why Attend"
FieldInternalName="Why_x0020_Attend"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field">
<div dir="">
<div class="ExternalClass3B73CED3A9B54E11A6C6A637FCB42858">
<p>N/A</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Who_x0020_Should_x0020_Attend"></a>Who Should Attend</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Who Should Attend"
FieldInternalName="Who_x0020_Should_x0020_Attend"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field">
<div dir="">
<div class="ExternalClass869FCB4EA8F64F7BA8A94EBF4120DF97">
<p>N/A</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_CEUs"></a>CEUs</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="CEUs"
FieldInternalName="CEUs"
FieldType="SPFieldMultiChoice"
-->
.4
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Cancellation_x0020_Policy"></a>Cancellation Policy</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Cancellation Policy"
FieldInternalName="Cancellation_x0020_Policy"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Special_x0020_Requirements"></a>Special Requirements</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="Special Requirements"
FieldInternalName="Special_x0020_Requirements"
FieldType="SPFieldMultiChoice"
-->
Students will need to bring laptops
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Instructor_x0020_Name_x0028_s_x0"></a>Instructor Name(s)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Instructor Name(s)"
FieldInternalName="Instructor_x0020_Name_x0028_s_x0"
FieldType="SPFieldText"
-->
srikanth vadlakonda
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark__x2022__x0009_Instructor_x0020_B"></a>Instructor Bio</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Instructor Bio"
FieldInternalName="_x2022__x0009_Instructor_x0020_B"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field">
<div dir="">
<div class="ExternalClass0A4AF216358745478A3D31BE1A6828F5">
<p>test</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_URL_x0020_of_x0020_the_x0020_pag"></a>URL of the page</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="URL of the page"
FieldInternalName="URL_x0020_of_x0020_the_x0020_pag"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Would_x0020_you_x0020_like_x0020"></a>Would you like to add a Training Course Occurrence/Add Date and Registration Info?</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Would you like to add a Training Course Occurrence/Add Date and Registration Info?"
FieldInternalName="Would_x0020_you_x0020_like_x0020"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Training_x0020_Course_x0020_Date"></a>Training Course Date</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Training Course Date"
FieldInternalName="Training_x0020_Course_x0020_Date"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Location_x0020__x0028_Venue_x002"></a>Location (Venue and City)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Location (Venue and City)"
FieldInternalName="Location_x0020__x0028_Venue_x002"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Conference_x0020_Name"></a>Conference Name</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Conference Name"
FieldInternalName="Conference_x0020_Name"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Early_x0020_Bird_x0020_Registrat"></a>Early Bird Registration Date</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Early Bird Registration Date"
FieldInternalName="Early_x0020_Bird_x0020_Registrat"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Course_x0020_Registration_x0020_"></a>Course Registration URL (If no registration link is available at this time, Coming Soon image will be used.)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Course Registration URL (If no registration link is available at this time, Coming Soon image will be used.)"
FieldInternalName="Course_x0020_Registration_x0020_"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Corresponding_x0020_Event_x0020_1"></a>Corresponding Event Name (If applicable)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event Name (If applicable)"
FieldInternalName="Corresponding_x0020_Event_x0020_1"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Corresponding_x0020_Event_x0020_2"></a>Corresponding Event URL (If applicable)</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event URL (If applicable)"
FieldInternalName="Corresponding_x0020_Event_x0020_2"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Is_x0020_this_x0020_Training_x00"></a>Is this Training Course held in conjunction with another event?</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Is this Training Course held in conjunction with another event?"
FieldInternalName="Is_x0020_this_x0020_Training_x00"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Corresponding_x0020_Event_x0020_"></a>Corresponding Event Name</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event Name"
FieldInternalName="Corresponding_x0020_Event_x0020_"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Corresponding_x0020_Event_x0020_0"></a>Corresponding Event URL</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event URL"
FieldInternalName="Corresponding_x0020_Event_x0020_0"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Priority"></a>EMERGENCY</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="EMERGENCY"
FieldInternalName="Priority"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Details_x002f_Special_x0020_Inst"></a>Details/Special Instructions</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Details/Special Instructions"
FieldInternalName="Details_x002f_Special_x0020_Inst"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Current_x0020_Text_x002f_Content"></a>Current Text/Content</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Current Text/Content"
FieldInternalName="Current_x0020_Text_x002f_Content"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_New_x0020_Text_x002f_Content"></a>New Text/Content</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="New Text/Content"
FieldInternalName="New_x0020_Text_x002f_Content"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Project_x0020_Assigned_x0020_To"></a>Project Assigned To</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Project Assigned To"
FieldInternalName="Project_x0020_Assigned_x0020_To"
FieldType="SPFieldChoice"
-->
SPEHQ\webcontent
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Date_x0020_Completed"></a>Date Completed</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Date Completed"
FieldInternalName="Date_x0020_Completed"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Status"></a>Status</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Status"
FieldInternalName="Status"
FieldType="SPFieldChoice"
-->
Not started
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Status_x0020_Comments"></a>Status Comments</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Status Comments"
FieldInternalName="Status_x0020_Comments"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_tjil"></a>Person or Group</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldUser">
<!-- FieldName="Person or Group"
FieldInternalName="tjil"
FieldType="SPFieldUser"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Attachment_x003f_"></a>Attachment?</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Attachment?"
FieldInternalName="Attachment_x003f_"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr id="idAttachmentsRow" style="display: none;">
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<h3 class="ms-standardheader">
<a name="SPBookmark_Attachments"></a>Attachments</h3>
</td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldAttachments">
<!-- FieldName="Attachments"
FieldInternalName="Attachments"
FieldType="SPFieldAttachments"
-->
<table border="0" cellpadding="0" cellspacing="0" id="idAttachmentsTable"></table>
</td>
<script type="text/javascript">
// <![CDATA[
if (typeof ShowAttachmentRows == "function")
ShowAttachmentRows();
// ]]>
</script>
</tr>
</tbody>
</table>

Passing a selector to JQuery always returns a JQuery "wrapped set" object (whether or not any elements were actually found) and that's what your alert() is showing you. What you care about is if there is anything in that set. To test that, you can look at the .length property and test if it is > 0. If so, you know that at least one element was found and is in the set:
alert($(".ms-formtable tr:nth-child(7) td:nth-child(2):contains('New Scheduling')").length > 0);
alert($(".ms-formtable tr:nth-child(7) td:nth-child(2):contains('Something that won\' be found.')").length > 0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Title"></a>EzLabor Code</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="EzLabor Code"
FieldInternalName="Title"
FieldType="SPFieldText"
-->
test
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Project_x0020_Title"></a>Project Description</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Project Description"
FieldInternalName="Project_x0020_Title"
FieldType="SPFieldText"
-->
test
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Date_x0020_Requested"></a>Request Date</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Request Date"
FieldInternalName="Date_x0020_Requested"
FieldType="SPFieldDateTime"
-->
5/8/2018
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Start_x0020_Date"></a>Due Date</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Due Date"
FieldInternalName="Start_x0020_Date"
FieldType="SPFieldDateTime"
-->
5/8/2018
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Marketing_x002f_Project_x0020_Ma"></a>Marketing/Project Manager</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldUserMulti">
<!-- FieldName="Marketing/Project Manager"
FieldInternalName="Marketing_x002f_Project_x0020_Ma"
FieldType="SPFieldUserMulti"
-->
<nobr><span class="ms-imnSpan"><span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10"><img title="" alt="No presence information" name="imnmark" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" showofflinepawn="1" src="/_layouts/15/images/spimn.png" sip="" id="imn0,type=sip"></span></span><span class="ms-noWrap ms-imnSpan"><img title="" alt="No presence information" name="imnmark" class="ms-hide" showofflinepawn="1" src="/_layouts/15/images/spimn.png" sip="" id="imn1,type=sip"><a onclick="GoToLinkOrDialogNewWindow(this); return false;" class="ms-peopleux-userdisplink ms-subtleLink" href="/dept/wc/_layouts/15/listform.aspx?PageType=4&ListId={4d24aff7-9486-4883-87e2-271651194a4c}&ID=21">Srikanth Vadlakonda</a></span></nobr>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Select_x0020_Here"></a>Type of Request (Please Select)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Type of Request (Please Select)"
FieldInternalName="Select_x0020_Here"
FieldType="SPFieldChoice"
-->
Training Course Page
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Training_x0020_Courses"></a>Training Courses (Please Select)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Training Courses (Please Select)"
FieldInternalName="Training_x0020_Courses"
FieldType="SPFieldChoice"
-->
New Scheduling of Training Course (includes details on left side)
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Is_x0020_this_x0020_a_x0020_Trai"></a>Is this a Training Course or Seminar?</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Is this a Training Course or Seminar?"
FieldInternalName="Is_x0020_this_x0020_a_x0020_Trai"
FieldType="SPFieldChoice"
-->
Training Course
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Title0"></a>Title</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Title"
FieldInternalName="Title0"
FieldType="SPFieldText"
-->
N/A
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Technical_x0020_Discipline_x0028"></a>Technical Discipline(s)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="Technical Discipline(s)"
FieldInternalName="Technical_x0020_Discipline_x0028"
FieldType="SPFieldMultiChoice"
-->
Completions
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Description"></a>Course Description (attach file if needed)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Course Description (attach file if needed)"
FieldInternalName="Description"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field"><div dir=""><div class="ExternalClass77CDADB3DBD54D56AE9F0B4497948B3E"><p>N/A</p></div></div></div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Learning_x0020_Level"></a>Learning Level</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Learning Level"
FieldInternalName="Learning_x0020_Level"
FieldType="SPFieldChoice"
-->
Introductory
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Course_x0020_Length"></a>Course Length</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Course Length"
FieldInternalName="Course_x0020_Length"
FieldType="SPFieldText"
-->
N/A
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Why_x0020_Attend"></a>Why Attend</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Why Attend"
FieldInternalName="Why_x0020_Attend"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field"><div dir=""><div class="ExternalClass3B73CED3A9B54E11A6C6A637FCB42858"><p>N/A</p></div></div></div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Who_x0020_Should_x0020_Attend"></a>Who Should Attend</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Who Should Attend"
FieldInternalName="Who_x0020_Should_x0020_Attend"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field"><div dir=""><div class="ExternalClass869FCB4EA8F64F7BA8A94EBF4120DF97"><p>N/A</p></div></div></div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_CEUs"></a>CEUs</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="CEUs"
FieldInternalName="CEUs"
FieldType="SPFieldMultiChoice"
-->
.4
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Cancellation_x0020_Policy"></a>Cancellation Policy</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Cancellation Policy"
FieldInternalName="Cancellation_x0020_Policy"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Special_x0020_Requirements"></a>Special Requirements</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldMultiChoice">
<!-- FieldName="Special Requirements"
FieldInternalName="Special_x0020_Requirements"
FieldType="SPFieldMultiChoice"
-->
Students will need to bring laptops
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Instructor_x0020_Name_x0028_s_x0"></a>Instructor Name(s)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Instructor Name(s)"
FieldInternalName="Instructor_x0020_Name_x0028_s_x0"
FieldType="SPFieldText"
-->
srikanth vadlakonda
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark__x2022__x0009_Instructor_x0020_B"></a>Instructor Bio</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Instructor Bio"
FieldInternalName="_x2022__x0009_Instructor_x0020_B"
FieldType="SPFieldNote"
-->
<div class="ms-rtestate-field"><div dir=""><div class="ExternalClass0A4AF216358745478A3D31BE1A6828F5"><p>test</p></div></div></div>
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_URL_x0020_of_x0020_the_x0020_pag"></a>URL of the page</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="URL of the page"
FieldInternalName="URL_x0020_of_x0020_the_x0020_pag"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Would_x0020_you_x0020_like_x0020"></a>Would you like to add a Training Course Occurrence/Add Date and Registration Info?</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Would you like to add a Training Course Occurrence/Add Date and Registration Info?"
FieldInternalName="Would_x0020_you_x0020_like_x0020"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Training_x0020_Course_x0020_Date"></a>Training Course Date</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Training Course Date"
FieldInternalName="Training_x0020_Course_x0020_Date"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Location_x0020__x0028_Venue_x002"></a>Location (Venue and City)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Location (Venue and City)"
FieldInternalName="Location_x0020__x0028_Venue_x002"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Conference_x0020_Name"></a>Conference Name</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Conference Name"
FieldInternalName="Conference_x0020_Name"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Early_x0020_Bird_x0020_Registrat"></a>Early Bird Registration Date</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Early Bird Registration Date"
FieldInternalName="Early_x0020_Bird_x0020_Registrat"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Course_x0020_Registration_x0020_"></a>Course Registration URL (If no registration link is available at this time, Coming Soon image will be used.)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Course Registration URL (If no registration link is available at this time, Coming Soon image will be used.)"
FieldInternalName="Course_x0020_Registration_x0020_"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Corresponding_x0020_Event_x0020_1"></a>Corresponding Event Name (If applicable)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event Name (If applicable)"
FieldInternalName="Corresponding_x0020_Event_x0020_1"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Corresponding_x0020_Event_x0020_2"></a>Corresponding Event URL (If applicable)</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event URL (If applicable)"
FieldInternalName="Corresponding_x0020_Event_x0020_2"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Is_x0020_this_x0020_Training_x00"></a>Is this Training Course held in conjunction with another event?</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Is this Training Course held in conjunction with another event?"
FieldInternalName="Is_x0020_this_x0020_Training_x00"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Corresponding_x0020_Event_x0020_"></a>Corresponding Event Name</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event Name"
FieldInternalName="Corresponding_x0020_Event_x0020_"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Corresponding_x0020_Event_x0020_0"></a>Corresponding Event URL</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
<!-- FieldName="Corresponding Event URL"
FieldInternalName="Corresponding_x0020_Event_x0020_0"
FieldType="SPFieldText"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Priority"></a>EMERGENCY</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="EMERGENCY"
FieldInternalName="Priority"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Details_x002f_Special_x0020_Inst"></a>Details/Special Instructions</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Details/Special Instructions"
FieldInternalName="Details_x002f_Special_x0020_Inst"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Current_x0020_Text_x002f_Content"></a>Current Text/Content</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Current Text/Content"
FieldInternalName="Current_x0020_Text_x002f_Content"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_New_x0020_Text_x002f_Content"></a>New Text/Content</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="New Text/Content"
FieldInternalName="New_x0020_Text_x002f_Content"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Project_x0020_Assigned_x0020_To"></a>Project Assigned To</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Project Assigned To"
FieldInternalName="Project_x0020_Assigned_x0020_To"
FieldType="SPFieldChoice"
-->
SPEHQ\webcontent
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Date_x0020_Completed"></a>Date Completed</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldDateTime">
<!-- FieldName="Date Completed"
FieldInternalName="Date_x0020_Completed"
FieldType="SPFieldDateTime"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Status"></a>Status</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Status"
FieldInternalName="Status"
FieldType="SPFieldChoice"
-->
Not started
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Status_x0020_Comments"></a>Status Comments</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldNote">
<!-- FieldName="Status Comments"
FieldInternalName="Status_x0020_Comments"
FieldType="SPFieldNote"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_tjil"></a>Person or Group</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldUser">
<!-- FieldName="Person or Group"
FieldInternalName="tjil"
FieldType="SPFieldUser"
-->
</td>
</tr>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Attachment_x003f_"></a>Attachment?</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<!-- FieldName="Attachment?"
FieldInternalName="Attachment_x003f_"
FieldType="SPFieldChoice"
-->
No
</td>
</tr>
<tr id="idAttachmentsRow" style="display: none;">
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Attachments"></a>Attachments</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldAttachments">
<!-- FieldName="Attachments"
FieldInternalName="Attachments"
FieldType="SPFieldAttachments"
-->
<table border="0" cellpadding="0" cellspacing="0" id="idAttachmentsTable"></table>
</td>
<script type="text/javascript">// <![CDATA[
if (typeof ShowAttachmentRows == "function")
ShowAttachmentRows();
// ]]>
</script>
</tr>
</tbody></table>

HTML Drag and Drop... Can Drag But Not Drop

My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.

Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();

Jquery datatables header colspan

This Jquery datatable example says I have to add a <th> for every column, because of handlers. I have this example, I added an extra row of empty headers, to be able to create a datatable.
Is there a way to create datatable without adding this extra row of headers? I need colspan in the header (doesn't matter if I loose the sorting for the first 2 columns, with colspan header).
HTML code:
<table id="reportTable0" border="0" class="table" cellspacing="1" cellpadding="0">
<thead>
<tr>
<th rowspan="1" colspan="2" class="dim_ctg sorting">
Measure
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 1 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 2 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 3 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 4 </div>
</th>
<th nowrap="" class="dim_ctg">
<div class="th-inner sortable both">
<span class="modal-trigger" data-toggle="modal" data-target="#' + modal3Id + '">AVG</span>
</div>
</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_1 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">77.64</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.33</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.85</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.33</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">76.79</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_2 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.60</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">78.44</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.39</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">77.58</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">78.84</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_3 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.40</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.07</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.67</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.04</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.14</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_4 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.72</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.76</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.89</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.36</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.92</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_5 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.69</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.31</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.83</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.83</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.68</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> EXAM_1 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.12</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">82.37</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.13</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">83.36</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">83.56</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> EXAM_2 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.21</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.91</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.25</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.45</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.81</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> Final Mark </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">82.07</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.29</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.52</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.28</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">81.53</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> MIDTERM </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.85</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.69</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.87</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.80</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">84.81</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> MR_GB </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">0</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="dim_ctg" nowrap="">
<span class="modal-trigger" data-toggle="modal" data-target="#">Course </span>
</td>
<td class="dim_ctg" nowrap="">
<span class="modal-trigger" data-toggle="modal" data-target="#">Component </span>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_1">80.99</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_2">80.10</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_3">80.58</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_4">80.13</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_5">80.46</div>
</td>
</tr>
</tfoot>
</table>
JavaScript code:
var options = {
sDom: 'rt'
};
$('#reportTable0').DataTable(options);

Just add three resource and datatable will work
<script src="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
Also remove This Section
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>

How to calculate values dynamically from textbox using jQuery?

I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.
I don't know much about jQuery. Please help me to solve this problem.
In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".
And again the total sum of all the prices should appear in the button as a Total.
Please note: all the row values are coming from my database table based on the selection of items by users.
I have used only this code to show values in my invoice.jsp page:
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center" >
<s:textfield value="%{price}" name="" size="6"></s:textfield>
</td>
</tr>
</s:iterator>
And my invoice.jsp output looks like this:
I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).
I also tried this but I am still unable to solve my problem.
My full JSP code:
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74%">
<s:form action="dfs" id="form3" theme="simple">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="your_content">
<tr>
<td valign="top" height="10%">
<div id="invNum">Invoice# 12688</div>
<div id="ttielMain">Vision Books</div>
<div id="Orgaddress"> Thamel Kathmandu Nepal</div>
<div id="phoneNum"> Tel# 00977-1-12173803</div>
<div id="websiteOrg"> www.thebestbookfinder.com</div>
</td>
</tr>
<tr>
<td valign="top" width="100%" align="left">
----------------------------------------------------------- -----------------------------------
</td>
</tr>
<tr>
<td height="6%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
<td width="65%" align="left">Title</td>
<td width="10%" align="left">Unit Price</td>
<td width="10%" align="center">Qty</td>
<td width="15%" align="left">Line Total</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="65%" align="left">
-------------------------------------------------------
</td>
<td width="10%" align="left">----------</td>
<td width="10%" align="center">-----</td>
<td width="15%" align="left">-------------</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="65%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center"><s:textfield value="%{price}" name="" size="6"></s:textfield></td>
</tr>
</s:iterator>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
<s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">Discount:<sj:textfield name="amt" size="1" placeholder=" %"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
Total: <s:property value="%{'' + #attr.total}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>

As #flow said, use .change():
$(function() {
$('input[name^="quantity"]').change(function() {
var unitprice = $(this).siblings('input[name^="unitprice"]').val();
$(this).siblings('input[name^="price"]')
.val($(this).val() * unitprice);
});
});

Use .change() on your inputs.
jQuery Docs - Change

Develop Reference

JavaScript is the programming language of the Web.

Hightlight text and change color - javascript

Related

Exporting html to Excel / CSV using tableExport, the exported file loses its formatting

Find text in <td> nth-child in jquery

HTML Drag and Drop... Can Drag But Not Drop

Jquery datatables header colspan

How to calculate values dynamically from textbox using jQuery?

Categories

Resources