How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?

[asifakhtar]

I have to save/batch update all rows where any rows’ input or select elements contains class bg-warning or save all rows where row’s id contains “trScholar_evt” with a button click. I want to create a JOSN array in the following format using JavaScript or jQuery. My JSON array contains information about the rows and all columns.

const data =
[
{
"row_ID": "trScholar_11085716",
"row_Data_Attributes": [{"recordid": "11085716", "ownerid": "7147119"}],
"row_Class": "",
"columns": [
{
"column_Header":"Unique Identifier",
"column_ID":"scholarUniqueID_11085716",
"column_Class": "scholarUniqueID col-id-num",
"column_Value":"11085716"
},
{
"column_Header":"Scholar Last Name",
"column_ID":"scholarLastName_11085716",
"column_Class": "dataInput scholarLastName",
"column_Value":"Conway"
},
{
"column_Header":"Scholar First Name",
"column_ID":"scholarFirstName_11085716",
"column_Class": "dataInput scholarFirstName",
"column_Value":"Aaron"
},
{
"column_Header":"Status of Scholar Activit",
"column_ID":"activityStatus_11085716",
"column_Class": "activityStatus",
"column_Value":"Draft"
},
{
"column_Header":"Grant Fiscal Year",
"column_ID":"grantFiscalYear_11085716",
"column_Class": "dataInput grantFiscalYear bg-warning",
"column_Value":"2019"
},
{
"column_Header":"Status",
"column_ID":"select_status_11085716",
"column_Class": "dataInput select_status",
"column_Value":"Active"
},
{
"column_Header":"Scholar E-mail",
"column_ID":"scholarEmail_11085716",
"column_Class": "dataInput scholarEmail",
"column_Value":"(e-mail address removed)"
},
{
"column_Header":"Scholar Phone",
"column_ID":"scholarPhone_11085716",
"column_Class": "dataInput scholarPhone",
"column_Value":"315-263-7593"
},
{
"column_Header":"Scholar Gender",
"column_ID":"select_scholarGender_11085716",
"column_Class": "dataInput select_scholarGender",
"column_Value":"Male"
},
{
"column_Header":"Race",
"column_ID":"select_scholarRace_11085716",
"column_Class": "dataInput select_scholarRace",
"column_Value":"Black or African American"
},
{
"column_Header":"Multiple Races",
"column_ID":"sscholarMultiRace_11085716",
"column_Class": "dataInput scholarMultiRace",
"column_Value":"Asian"
},
{
"column_Header":"Ethinicity",
"column_ID":"select_scholarEthinicity_11085716",
"column_Class": "dataInput select_scholarEthinicity",
"column_Value":"Not Hispanic or Latino or Spanish Origin"
},
{
"column_Header":"Home State",
"column_ID":"select_scholarState_11085716",
"column_Class": "dataInput select_scholarState",
"column_Value":"NY"
},
{
"column_Header":"Academic Level",
"column_ID":"select_undergraduateGraduate_11085716",
"column_Class": "dataInput select_undergraduateGraduate",
"column_Value":"Doctoral"
},
{
"column_Header":"Major Studies",
"column_ID":"select_majorStudies_11085716",
"column_Class": "dataInput select_majorStudies",
"column_Value":"Anesthesia"
},
{
"column_Header":"If other, identify Major Study",
"column_ID":"otherMajorStudy_11085716",
"column_Class": "dataInput majorStudies",
"column_Value":"Medicine"
},
{
"column_Header":"Future Focus Area",
"column_ID":"select_futureFocusArea_11085716",
"column_Class": "dataInput select_futureFocusArea bg-warning",
"column_Value":"Dentistry"
},
{
"column_Header":"if other, identify Future Focus Area",
"column_ID":"inputFutureFocusArea_11085716",
"column_Class": "dataInput futureFocusArea",
"column_Value":"Test future Focus Area"
},
{
"column_Header":"Intended Specialty",
"column_ID":"select_intendedSpecialty_11085716",
"column_Class": "dataInput select_intendedSpecialty bg-warning",
"column_Value":"Allergy and immunology"
},
{
"column_Header":"if other, identify Intended Specialty",
"column_ID":"inputIntendedSpecialty_11085716",
"column_Class": "dataInput intendedSpecialty",
"column_Value":"Test Intended Specialty"
},
{
"column_Header":"Full Time or Part Student",
"column_ID":"select_FullTimePartTime_11085716",
"column_Class": "dataInput select_FullTimePartTime bg-warning",
"column_Value":"Full Time"
},
{
"column_Header":"Intended Profession",
"column_ID":"txtIntendedProfession_11085716",
"column_Class": "dataInput txtIntendedProfession bg-warning",
"column_Value":"Test Intended Profession"
},
{
"column_Header":"Degree Awarded",
"column_ID":"txtDegreeAwarded_11085716",
"column_Class": "dataInput txtDegreeAwarded bg-warning",
"column_Value":"Test Degree Awarded"
},
{
"column_Header":"2019 Scholarship Amount Awarded",
"column_ID":"2019scholarshipAmount_11085716",
"column_Class": "dataInput 2019scholarshipAmount bg-warning",
"column_Value":"100"
},
{
"column_Header":"2020 Scholarship Amount Awarded",
"column_ID":"2020scholarshipAmount_11085716",
"column_Class": "dataInput 2020scholarshipAmount bg-warning",
"column_Value":"200"
},
{
"column_Header":"2021 Scholarship Amount Awarded",
"column_ID":"2021scholarshipAmount_11085716",
"column_Class": "dataInput 2021scholarshipAmount bg-warning",
"column_Value":"300"
},
{
"column_Header":"2022 Scholarship Amount Awarded",
"column_ID":"2022scholarshipAmount_11085716",
"column_Class": "dataInput 2022scholarshipAmount bg-warning",
"column_Value":"400"
},
{
"column_Header":"Amount Awarded to Date",
"column_ID":"scholarshipAwardforAcademicYear_11085716",
"column_Class": "dataInput scholarshipAwardforAcademicYear",
"column_Value":"21000"
},
{
"column_Header":"School Attended",
"column_ID":"schoolAttended_11085716",
"column_Class": "dataInput schoolAttended",
"column_Value":"State University of New York Downstate Medical Center College of Medicine"
},
{
"column_Header":"School City",
"column_ID":"schoolCity_11085716",
"column_Class": "dataInput schoolCity",
"column_Value":"Brooklyn"
},
{
"column_Header":"School State",
"column_ID":"select_schoolState_11085716",
"column_Class": "dataInput select_schoolState",
"column_Value":"NY"
},
{
"column_Header":"Year of Graduation",
"column_ID":"yearofGraduation_11085716",
"column_Class": "dataInput yearofGraduation",
"column_Value":"N/A"
},
{
"column_Header":"Anticipated Year of Graduation",
"column_ID":"anticipatedYearofGraduation_11085716",
"column_Class": "dataInput anticipatedYearofGraduation",
"column_Value":"2022"
}
]
}
]

<table id="scholarsTable" cellspacing="10" cellpadding="10">
<thead class="headTable">
<tr>
<th class="xmlheader ncolheader centerAlign header-id-num" scope="col">
Unique Identifier
</th>
<th class="xmlheader bcolheader centerAlign header-last-name" scope="col">
Scholar Last Name
</th>
<th class="xmlheader bcolheader centerAlign header-first-name" scope="col">
Scholar First Name
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Status of Scholar Activity
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Grant Fiscal Year
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Status
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Scholar E-mail
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Scholar Phone
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Scholar Gender
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">Race</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Multiple Races
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Ethinicity
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Home State
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Academic Level
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Major Studies
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
If other, identify Major Study
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Future Focus Area
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
if other, identify Future Focus Area
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Intended Specialty
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
if other, identify Intended Specialty
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Full Time or Part Student
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Intended Profession
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
Degree Awarded
</th>
<th class="xmlheader bcolheader centerAlign" scope="col" data-scholarshipyear="2019">
2019 Scholarship Amount Awarded
</th>
<th class="xmlheader bcolheader centerAlign" scope="col" data-scholarshipyear="2020">
2020 Scholarship Amount Awarded
</th>
<th class="xmlheader bcolheader centerAlign" scope="col" data-scholarshipyear="2021">
2021 Scholarship Amount Awarded
</th>
<th class="xmlheader bcolheader centerAlign" scope="col" data-scholarshipyear="2022">
2022 Scholarship Amount Awarded
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Amount Awarded to Date
</th>
<th class="xmlheader bcolheader centerAlign" scope="col">
School Attended
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
School City
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
School State
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Year of Graduation
</th>
<th class="xmlheader ncolheader centerAlign" scope="col">
Anticipated Year of Graduation
</th>
</tr>
</thead>
<tbody id="scholarsBody">
<tr id="trScholar_11085716" data-recordid="11085716" data-ownerid="7147121">
<td id="scholarUniqueID_11085716" class="scholarUniqueID col-id-num">11085716</td>
<td class="col-last-name"><input id="scholarLastName_11085716" class="dataInput scholarLastName" type="text" value="Conway" required=""></td>
<td class="col-first-name"><input id="scholarFirstName_11085716" class="dataInput scholarFirstName" type="text" value="Aaron" required=""></td>
<td id="activityStatus_11085716" class="activityStatus">Draft</td>
<td><input id="grantFiscalYear_11085716" class="dataInput grantFiscalYear bg-warning" type="text" value="2019"></td>
<td>
<select id="select_status_11085716" class="dataInput select_status">
<option value="" title=""></option>
<option value="Active" title="Active" selected="">Active</option>
<option value="Inactive" title="Inactive">Inactive</option>
</select>
</td>
<td><input id="scholarEmail_11085716" class="dataInput scholarEmail" type="text" value="(e-mail address removed)" required=""></td>
<td><input id="scholarPhone_11085716" class="dataInput scholarPhone" type="text" value="315-263-7593"></td>
<td>
<select id="select_scholarGender_11085716" class="dataInput select_scholarGender">
<option value="" title=""></option>
<option value="Female" title="Female">Female</option>
<option value="Male" title="Male" selected="">Male</option>
</select>
</td>
<td>
<select id="select_scholarRace_11085716" class="dataInput select_scholarRace">
<option value="" title=""></option>
<option value="Asian" title="Asian">Asian</option>
<option value="Black or African American" title="Black or African American" selected="">Black or African American</option>
</select>
</td>
<td><input id="scholarMultiRace_11085716" class="dataInput scholarMultiRace" type="text" value="Asian"></td>
<td>
<select id="select_scholarEthinicity_11085716" class="dataInput select_scholarEthinicity">
<option value="" title=""></option>
<option value="Hispanic or Latino or Spanish Origin" title="Hispanic or Latino or Spanish Origin">Hispanic or Latino or Spanish Origin</option>
<option value="Not Hispanic or Latino or Spanish Origin" title="Not Hispanic or Latino or Spanish Origin" selected="">Not Hispanic or Latino or Spanish Origin</option>
</select>
</td>
<td>
<select id="select_scholarState_11085716" class="dataInput select_scholarState">
<option value="" title=""></option>
<option value="AL" title="AL">AL</option>
<option value="NY" title="NY" selected="">NY</option>
</select>
</td>
<td>
<select id="select_undergraduateGraduate_11085716" class="dataInput select_undergraduateGraduate">
<option value="" title=""></option>
<option value="Associates" title="Associates">Associates</option>
<option value="Bachelors" title="Bachelors">Bachelors</option>
<option value="Masters" title="Masters">Masters</option>
<option value="Doctoral" title="Doctoral" selected="">Doctoral</option>
</select>
</td>
<td>
<select id="select_majorStudies_11085716" class="dataInput select_majorStudies">
<option value="" title=""></option>
<option value="Anesthesia" title="Anesthesia" selected="">Anesthesia</option>
<option value="Behavioral Health" title="Behavioral Health">Behavioral Health</option>
</select>
</td>
<td><input id="otherMajorStudy_11085716" class="dataInput majorStudies" type="text" value="Medicine"></td>
<td>
<select id="select_futureFocusArea_11085716" class="dataInput select_futureFocusArea bg-warning">
<option value="" title=""></option>
<option value="Dentistry" title="Dentistry" selected="">Dentistry</option>
<option value="Physician" title="Physician">Physician</option>
</select>
</td>
<td><input id="inputFutureFocusArea_11085716" class="dataInput futureFocusArea" type="text" value="Test future Focus Area" disabled=""></td>
<td>
<select id="select_intendedSpecialty_11085716" class="dataInput select_intendedSpecialty bg-warning">
<option value="" title=""></option>
<option value="Allergy and immunology" title="Allergy and immunology" selected="">Allergy and immunology</option>
<option value="Anesthesiology" title="Anesthesiology">Anesthesiology</option>
</select>
</td>
<td><input id="inputIntendedSpecialty_11085716" class="dataInput intendedSpecialty" type="text" value="Test Intended Specialty" disabled=""></td>
<td>
<select id="select_FullTimePartTime_11085716" class="dataInput select_FullTimePartTime bg-warning">
<option value="" title=""></option>
<option value="Full Time" title="Full Time" selected="">Full Time</option>
<option value="Part Time" title="Part Time">Part Time</option>
</select>
</td>
<td><input id="txtIntendedProfession_11085716" class="dataInput txtIntendedProfession bg-warning" type="text" value="Test Intended Profession"></td>
<td><input id="txtDegreeAwarded_11085716" class="dataInput txtDegreeAwarded bg-warning" type="text" value="Test Degree Awarded"></td>
<td><input id="2019scholarshipAmount_11085716" class="dataInput 2019cholarshipAmount bg-warning" type="text" value="100"></td>
<td><input id="2020scholarshipAmount_11085716" class="dataInput 2020scholarshipAmount bg-warning" type="text" value="200"></td>
<td><input id="2021scholarshipAmount_11085716" class="dataInput 2021scholarshipAmount bg-warning" type="text" value="300"></td>
<td><input id="2022scholarshipAmount_11085716" class="dataInput 2022scholarshipAmount bg-warning" type="text" value="400"></td>
<td><input id="scholarshipAwardforAcademicYear_11085716" class="dataInput scholarshipAwardforAcademicYear" type="text" value="21000"></td>
<td><input id="schoolAttended_11085716" class="dataInput schoolAttended" type="text" value="State University of New York Downstate Medical Center College of Medicine"></td>
<td><input id="schoolCity_11085716" class="dataInput schoolCity" type="text" value="Brooklyn"></td>
<td>
<select id="select_schoolState_11085716" class="dataInput select_schoolState">
<option value="" title=""></option>
<option value="AL" title="AL">AL</option>
<option value="NY" title="NY" selected="">NY</option>
</select>
</td>
<td><input id="yearofGraduation_11085716" class="dataInput yearofGraduation" type="text" value="N/A"></td>
<td><input id="anticipatedYearofGraduation_11085716" class="dataInput anticipatedYearofGraduation" type="text" value="2022"></td>
<td><button type="submit" id="deleteRowBtn" class="deleteRowBtn" tabindex="0">X</button></td>
</tr>
<tr id="trScholar_evt9007199254740990" data-recordid="evt9007199254740990" data-ownerid="0">
<td id="scholarUniqueID_evt9007199254740990" class="scholarUniqueID col-id-num"></td>
<td class="col-last-name"><input id="scholarLastName_evt9007199254740990" class="dataInput scholarLastName" type="text" value="" required=""></td>
<td class="col-first-name"><input id="scholarFirstName_evt9007199254740990" class="dataInput scholarFirstName" type="text" value="" required=""></td>
<td id="activityStatus_evt9007199254740990" class="activityStatus"></td>
<td><input id="grantFiscalYear_evt9007199254740990" class="dataInput grantFiscalYear" type="text" value=""></td>
<td>
<select id="select_status_evt9007199254740990" class="dataInput select_status">
<option value="" title="" selected=""></option>
<option value="Active" title="Active">Active</option>
<option value="Inactive" title="Inactive">Inactive</option>
</select>
</td>
<td><input id="scholarEmail_evt9007199254740990" class="dataInput scholarEmail" type="text" value="" required=""></td>
<td><input id="scholarPhone_evt9007199254740990" class="dataInput scholarPhone" type="text" value=""></td>
<td>
<select id="select_scholarGender_evt9007199254740990" class="dataInput select_scholarGender">
<option value="" title="" selected=""></option>
<option value="Female" title="Female">Female</option>
<option value="Male" title="Male">Male</option>
</select>
</td>
<td>
<select id="select_scholarRace_evt9007199254740990" class="dataInput select_scholarRace">
<option value="" title=""></option>
<option value="Asian" title="Asian">Asian</option>
<option value="Black or African American" title="Black or African American" selected="">Black or African American</option>
</select>
</td>
<td><input id="scholarMultiRace_evt9007199254740990" class="dataInput scholarMultiRace" type="text" value=""></td>
<td>
<select id="select_scholarEthinicity_evt9007199254740990" class="dataInput select_scholarEthinicity">
<option value="" title="" selected=""></option>
<option value="Hispanic or Latino or Spanish Origin" title="Hispanic or Latino or Spanish Origin">Hispanic or Latino or Spanish Origin</option>
<option value="Not Hispanic or Latino or Spanish Origin" title="Not Hispanic or Latino or Spanish Origin">Not Hispanic or Latino or Spanish Origin</option>
</select>
</td>
<td>
<select id="select_scholarState_evt9007199254740990" class="dataInput select_scholarState">
<option value="" title="" selected=""></option>
<option value="AL" title="AL">AL</option>
<option value="NY" title="NY">NY</option>
</select>
</td>
<td>
<select id="select_undergraduateGraduate_evt9007199254740990" class="dataInput select_undergraduateGraduate">
<option value="" title="" selected=""></option>
<option value="Associates" title="Associates">Associates</option>
<option value="Bachelors" title="Bachelors">Bachelors</option>
<option value="Masters" title="Masters">Masters</option>
<option value="Doctoral" title="Doctoral">Doctoral</option>
</select>
</td>
<td>
<select id="select_majorStudies_evt9007199254740990" class="dataInput select_majorStudies">
<option value="" title="" selected=""></option>
<option value="Anesthesia" title="Anesthesia">Anesthesia</option>
<option value="Behavioral Health" title="Behavioral Health">Behavioral Health</option>
</select>
</td>
<td><input id="otherMajorStudy_evt9007199254740990" class="dataInput majorStudies" type="text" value=""></td>
<td>
<select id="select_futureFocusArea_evt9007199254740990" class="dataInput select_futureFocusArea">
<option value="" title="" selected=""></option>
<option value="Dentistry" title="Dentistry">Dentistry</option>
<option value="Physician" title="Physician">Physician</option>
</select>
</td>
<td><input id="inputFutureFocusArea_evt9007199254740990" class="dataInput futureFocusArea" type="text" value=""></td>
<td>
<select id="select_intendedSpecialty_evt9007199254740990" class="dataInput select_intendedSpecialty">
<option value="" title="" selected=""></option>
<option value="Allergy and immunology" title="Allergy and immunology">Allergy and immunology</option>
<option value="Anesthesiology" title="Anesthesiology">Anesthesiology</option>
</select>
</td>
<td><input id="inputIntendedSpecialty_evt9007199254740990" class="dataInput intendedSpecialty" type="text" value=""></td>
<td>
<select id="select_FullTimePartTime_evt9007199254740990" class="dataInput select_FullTimePartTime">
<option value="" title="" selected=""></option>
<option value="Full Time" title="Full Time">Full Time</option>
<option value="Part Time" title="Part Time">Part Time</option>
</select>
</td>
<td><input id="txtIntendedProfession_evt9007199254740990" class="dataInput txtIntendedProfession" type="text" value=""></td>
<td><input id="txtDegreeAwarded_evt9007199254740990" class="dataInput txtDegreeAwarded" type="text" value=""></td>
<td><input id="2019scholarshipAmount_evt9007199254740990" class="dataInput 2019scholarshipAmount" type="text" value=""></td>
<td><input id="2020scholarshipAmount_evt9007199254740990" class="dataInput 2020scholarshipAmount" type="text" value=""></td>
<td><input id="2021scholarshipAmount_evt9007199254740990" class="dataInput 2021scholarshipAmount" type="text" value=""></td>
<td><input id="2022scholarshipAmount_evt9007199254740990" class="dataInput 2022scholarshipAmount" type="text" value=""></td>
<td><input id="scholarshipAwardforAcademicYear_evt9007199254740990" class="dataInput scholarshipAwardforAcademicYear" type="text" value=""></td>
<td><input id="schoolAttended_evt9007199254740990" class="dataInput schoolAttended" type="text" value=""></td>
<td><input id="schoolCity_evt9007199254740990" class="dataInput schoolCity" type="text" value=""></td>
<td>
<select id="select_schoolState_evt9007199254740990" class="dataInput select_schoolState">
<option value="" title="" selected=""></option>
<option value="AL" title="AL">AL</option>
<option value="NY" title="NY">NY</option>
</select>
</td>
<td><input id="yearofGraduation_evt9007199254740990" class="dataInput yearofGraduation" type="text" value=""></td>
<td><input id="anticipatedYearofGraduation_evt9007199254740990" class="dataInput anticipatedYearofGraduation" type="text" value=""></td>
<td><button type="submit" id="deleteRowBtn" class="deleteRowBtn">X</button></td>
</tr>
</tbody>
</table>