We Keep Coding

Set Table Cell Value and Hidden Input

I have a web form that allows users to enter details for creating a shipping consignment for 1 more more items. They enter the address from/to fields and then there's a table where they can enter 1 or more rows for items to be included on the shipment.
One of the table columns is for the Product ID, which is a value that is returned from a database query performed when entering a code in another table cell. We don't want users entering/editing this so we're including this as a hidden input but we would also like to display this to the user.
Here's what one of the table rows looks like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
<thead>
<th class="text-center" scope="col" width="15%">Product ID</th>
<th class="text-center" scope="col" width="15%">Product Code</th>
<th class="text-center" scope="col" width="10%">Qty</th>
<th class="text-center" scope="col" width="55%">Description</th>
<th class="text-center" scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="hidden" class="form-control productID" name="productID[]" value=""></td>
<td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
<td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
<td class="description"></td>
<td class="text-center deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
</tr>
When the user enters the Product Code value an AJAX request is performed to do the database query and I then use the following to update the other cells:
$this.closest('tr').children('.form-control.productID').html(productID);
$this.closest('tr').find('.form-control.productID').val(productID);
$this.closest('tr').children('.description').html(description);
The last two are updating correctly (hidden productID input value) and the description, but the value for the Product ID cell is remaining empty. I'm assuming I can have a hidden input value and a non input value for the same table cell at the same time and update both separately?

$this.closest('tr').children('.form-control.productID').html(productID);
This attempts to set the HTML of your inputs (all of them in the row). But text and hidden inputs have no HTML, only a value.
I think you're actually trying to set the HTML of the table cells, which you can do like so:
$this.closest('tr').find('td').html(productID);
Note that (like your existing code) this will match every td; judging by the table headers you really only want to match the first one:
$this.closest('tr').find('td').first().html(productID);
Note 2 that this is a bit fragile, and will break if your table structure changes. It would be safer to add a class to the cell you want to update, eg <td class='product_id'>, and target that with your selector.
$('.productCode').on('keyup', function() {
let productID = 42;
$(this).closest('tr').find('td').first().html(productID);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Type a letter in product code field to simulate your AJAX call:</p>
<table border=1>
<thead>
<th>Product ID</th>
<th>Product Code</th>
<th>Qty</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td><input type="hidden" class="form-control productID" name="productID[]" value=""></td>
<td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
<td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
<td class="description"></td>
</tr>

Access and Disable/enable input type date in td

I have a table that contains 2 Date type inputs, a span and 2 clickable icons for edit and save. What I am aiming for is to enable the input type date in my td's "onClick" on Edit Icon. But I don't know how to access the element in the td, to alter the disabled attribute. On edit the disabled attribute should be False, and after alteration if he clicks the save icon, the disabled attribute should go back to True. A plus would be for me, if I can make the save icon disabled(not clickable) by default, if the edit button was not clicked first, and after save it goes back to being disabled.
This is my HTML code:
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
</tbody>
</table>
My jQuery so far is:
$('.Icon-edit').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});
$('.Icon-save').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});

you can assign a class to your row, then get its child td by index:
<tr class="myclass">
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
$(".myClass").find("td:eq(4)");
Related Link: Get second td of tr using jquery

You can do this in one event listener and check the class of the one that was clicked to determine disable/enable.
I added classes to the <a> rather than using the <i> and added css to hide the "save" by default then use hide/show to toggle display on the buttons
$('.date-toggle').click(function() {
const $btn = $(this);
const disable = $btn.hasClass('save');
$btn.closest('tr').find('.BeginDate, .EndDate').prop('disabled', disable);
$btn.hide().siblings('.date-toggle').show()
});
.date-toggle.save{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
Save</i>
<a href="#" class="date-toggle edit">
<i class="far fa-edit Icon-edit">Edit</i></a>
</td>
</tr>
</tbody>
</table>

Passing javascript variable to thymeleaf

I'm working on a Spring MVC project and what I need now is to generate a table with a number of rows that is specified by the user from an input and doing that without refreshing the page.
Here is my HTML file
..............
<input type="number" class="form-control" id="numberRow1" placeholder="number">
<button type="button" id="execute1">Execute</button>
<div th:text="${myvar}" class="test"></div>
<div id="table1" class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Column Name</th>
<th scope="col">Type</th>
<th scope="col">Index</th>
<th scope="col">AI</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>INT</option>
<option>VARCHAR</option>
<option>DATE</option>
</select></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
.....................
And The script I'm trying to working with
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#execute1").click(function() {
var getVal = $("#numberColumn1").val();
$(".test").html(getVal);
var myvar = /*[[${myvar}]]*/ getVal;;
});
})
/*]]>*/
</script>
At this point I'm just trying to get the value of "myvar" and show it in this section <div th:text="${myvar}" class="test"></div>
But nothing works for me so far ..
Any help please because I really need it.
TY.

Add table row on dropdown select & delete row. Only once add the row from particular dropdown select

My requirement is as follows:
I have table with default row with dropdown in 1st column, Once i select an option from dropdown, 1 table row should be added, with same content as main row & should add delete button for that added row. Delete button should not visible for 1st row once 1 row is added then only delete button visible for 1st row. Pls help me on this.
Thanks in advance.
My code as follows
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
<thead>
<tr>
<th width="5%">Sr.no</th>
<th width="20%">Items</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Unit</th>
<th>Amount</th>
<th>Tax</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="additems" name="additems" class="form-control" required="required">
<option selected>-- Select --</option>
<option>Add new</option>
<option value="1"> Abc </option>
<option value="2"> IT services </option>
<option value="3"> JS Enterprises</option>
</select>
</td>
<td>Dell 500 series</td>
<td>55,333</td>
<td>10</td>
<td>NA</td>
<td>5,53,330</td>
<td>8%</td>
<td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td>
</tr>
</tbody>
</table>

Here you go with the solution https://jsfiddle.net/60fxtfen/1/
$(document).on('change', 'select[name="additems"]', function(){
if($('#additems option:selected').text() === "Add new"){
$('table tbody').append($('table tbody tr:first-child').clone());
$('table tbody tr:last-child td:first-child').text($('table tbody tr').length);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
<thead>
<tr>
<th width="5%">Sr.no</th>
<th width="20%">Items</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Unit</th>
<th>Amount</th>
<th>Tax</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="additems" name="additems" class="form-control" required="required">
<option selected>-- Select --</option>
<option>Add new</option>
<option value="1"> Abc </option>
<option value="2"> IT services </option>
<option value="3"> JS Enterprises</option>
</select>
</td>
<td>Dell 500 series</td>
<td>55,333</td>
<td>10</td>
<td>NA</td>
<td>5,53,330</td>
<td>8%</td>
<td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td>
</tr>
</tbody>
</table>
I have created the baseline, you need to let me know where to add delete & edit option.

Add Table Row With Appended Data On Button Click

This is an expansion of a previous question Dynamically append html table cell and the html has been slightly changed.
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<select id="e1">
<option value="1">Name 1</option>
<option value="2">Name 2</option>
<option value="3">Name 3</option>
</select>
</td>
<td>
<select id="e2">
<option value="#00ff00">Complete</option>
<option value="#ffff00">In Progress</option>
<option value="#ff0000">Incomplete</option>
</select>
</td>
<td>
<input type="datetime" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Add Row" />
The updated jsfiddle is https://jsfiddle.net/marcwebdude/48ng08tq/13/ . The problem is the append function at lines 47-64 where it is automatically appending a row.
$(function () {
var rowTamplate = $('table.tablesaw tbody tr').eq(0);
var rowContent = [
'<input type="text" value="Name" />',
'<input type="text" value="Title" />',
'<select><option>Name 1</option><option>Name 2</option><option>Name 3</option></select>',
'<select><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select>',
'<input type="datetime" value="Select Date" />',
'<input type="text" />'
];
var rowToadd = rowTamplate.clone();
rowToadd.find('td').each(function (index, element) {
$(element).append(rowContent[index]);
});
rowToadd.insertAfter('table.tablesaw tr:eq(2)');
for (var i = 0; i < 10; i++) {
rowToadd.clone().insertAfter('table.tablesaw tr:eq(2)');
}
I am looking for a solution that when the button is clicked it adds a row with the appended html. Not to automatically add it after a currently existing row. For instance if this table was blank, a button click would add a row with these 6 specified columns and the inputs that coincide with each cell.
The second issue with my existing script is that it's not formatting the appended html, when a row is added manually into the html file, it's formatting correctly, but not if it's appended via jquery.

The updated jsfiddle with revised jquery is https://jsfiddle.net/marcwebdude/48ng08tq/73/ , and so far it's appending contents into the table correctly. Here's the html
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Row" id="button" />
</div>
and here's the jquery
$(document).ready(function () {
$('#button').on('click', function(){
$('.tablesaw').find('tbody').append($('<tr><td><input type="text" value="Name" /></td><td class="title"><input type="text" value="Title" /></td><td><select class="e1"><option value="0">-- User --</option><option>Name 1</option><option>Name 2</option><option>Name 3</option></select></td><td><select class="e2"><option value="#fff">-- Status --</option><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select></td><td><input type="datetime" value="Select Date" /></td><td><input type="text" /></td></tr>'));
$('.e1').select2();
$('.e2').select2().on('change', function () {
$(this).next()
.find('.select2-selection')
.css({ backgroundColor: this.value });
}).trigger('change');
});
});
This appends the correct data into each cell as well as inherits styles once the row is created.