JSFiddle - React, Tailwind, and code Playground

by eventide

HTML

<div id="taskDivs">
    <div id="divApTdms">
        <button class="taskNotesSave">Save Progress</button>
        <table id="tblApTdms">
            <tr>
                <th>
                    </td>
                    <th class="notesColumn">SU/Test</th>
                    <th class="notesColumn">Parallel</th>
                    <th class="notesColumn">Activation</th>
            </tr>
            <tr>
                <td>Date of Extracted Files</td>
                <td>
                    <input type="text" id="dtApSuExtrFiles" />
                </td>
                <td>
                    <input type="text" id="dtApParExtrFiles" />
                </td>
                <td>
                    <input type="text" id="dtApActExtrFiles" />
                </td>
            </tr>
            <tr>
                <td>stage_ap_paid_invoice_create</td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
            </tr>
            <tr>
                <td>stage_ap_paid_invoice_update</td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
                <td>
                    <input type="text" class="txtTaskNote" value="" />
                </td>
            </tr>
        </table>
    </div>
</div>

JavaScript

$('#dtApSuExtrFiles, #dtApParExtrFiles, #dtApActExtrFiles').datepicker();
$('#taskDivs button').click(function () {
    
    var tableID = $(this).next().attr('id');
    //alert('Table ID to save: ' + tableID);
    SaveTaskNotes(tableID);
});

function SaveTaskNotes(tableID) {
	
	var numRows = $('#' + tableID + ' tr').length;
	var numCols = $('#' + tableID + ' tr:first-child th').length;
	console.log('Table ' + tableID + ' number of rows: ' + numRows);
	console.log('Table ' + tableID + ' number of columns: ' + numCols);

	// Iterate through rows
	//	Iterate through row's cols
	//		check if <td> has a <input>
	//			If so, get value
	var rowNum = 1;
	while (rowNum <= numRows) {
		console.log('Row ' + rowNum);
		var colNum = 1
		while (colNum <= numCols) {
			console.log('Col ' + colNum);
			if ($('#' + tableID + ' tr:nth-child(' + rowNum + ') td:nth-child(' + colNum + ') input').val() !== ''
				&&
				$('#' + tableID + ' tr:nth-child(' + rowNum + ') td:nth-child(' + colNum + ') input').val() !== undefined) {
				console.log('Current input value: ' + $('#' + tableID + ' tr:nth-child(' + rowNum + ') td:nth-child(' + colNum + ') input').val());
			}
			
			colNum++;
		}
		rowNum++;
	}
}