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

Joined
Oct 24, 2013
Messages
43
Reaction score
0
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.

JavaScript:
//Need a JOSN array in the following format

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":"[email protected]"
      },
      {
        "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"
      }
    ]
  } 
]

HTML:
<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="[email protected]" 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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top