add row to table with jquery and clean fields

Navigation
1

Thank you in advance for your collaboration, my question is this:

I have a table with a row, I want to add another row when I click on a button and clean the components of the new row is alfo like this: 

    <button id="lineItemButton">Add Row</button>
    <table id="tableFollow">
     <tbody><tr>
      <td width="105">
        <span>Reference Features</span>
     </td>
     <td width="834">
      <span>Action/Comments</span>
     </td>
     <td width="84">
        <span style="font-size:13.0pt">1085<o:p></o:p></span>
        <span style="font-size:13.0pt">Ratings<o:p></o:p></span>
     </td>
     <td width="84">
       <span>Rec. </span>
       <span>Type</span>
     </tr>
     <tr>
        <td width="105">
            <span><select class="form-control" id="IdReferenceFeatureType" 
              name="IdReferenceFeatureType">
               <option value="1">Roadway - Wearing Surface</option>
               <option selected="selected" value="2">Roadway - Deck</option>
               <option value="3">Roadway - Other</option>
               <option value="4">Superstructure - Main Member</option>
               <option value="5"> Superstructure - Bearings</option>
               <option value="6">Superstructure - Other</option>
               <option value="7"> Substructure - Abutments</option>
               <option value="8"> Substructure - Bents &amp; Piers</option>
               <option value="9"> Substructure - Other</option>
               <option value="10">Channel &amp; Channel Protection</option>
               <option value="11">Retaining Walls or Rip Rap</option>
               <option value="12">Approaches</option>
               <option value="13"> Structural Paint System</option>
               <option value="14">Vertical Clearance Signs</option>
           </select>
         </span>
     </td>
     <td width="834">
      <span style="font-size:13.0pt">Prueba otra 1556</span>
     </td>
     <td width="84">
      <span><select class="form-control" id="InspectionRaitingType" 
       name="InspectionRaitingType">
             <option value="1">N- Not applicable</option>
             <option value="2">9- Excelent condition</option>
             <option value="3">8- Very good condition</option>
             <option value="4">7- Good condition</option>
             <option value="5">6- Satisfactory condition</option>
             <option value="6">5- Fair condition</option>
             <option selected="selected" value="7">4- Poor 
                    condition</option>
             <option value="8">3- Serious condition</option>
             <option value="9">2- Critical condition</option>
             <option value="10">1- Failing condition</option>
             <option value="11">0- Failed condition</option>
           </select>
           </span>
     </td>
     <td width="84">
      <span><select class="form-control" id="IdRecommendationType" 
                                           name="IdRecommendationType"> 
             <option value="1">C</option>
             <option selected="selected" value="2">U</option>
             <option value="3">R</option>
             <option value="4">NR</option>
            </select>
      </span>
      </td>
     </tbody>
    </table>

Thanks again for your collaboration

    
asked by Javier Penagos 30.09.2018 в 02:23
source

1 answer

0

what you can do is add a <option> to each <select> and this option add the attribute select this so that when a new row is generated the value of option that we just added this selected . Also add the attribute disabled , so that the user can not select that option that we just added, for example for the select that has the id IdRecommendationType: 

<select class="form-control" id="IdRecommendationType" name="IdRecommendationType">
  <option value="-" disabled selected>Seleccionar valor</option>
  <option value="1">C</option>
  <option value="2">U</option>
  <option value="3">R</option>
  <option value="4">NR</option>
</select>

And so each new row would come with "clean" values. I leave the complete code, I only made changes in the html in all select , example .

    
answered by 30.09.2018 в 17:48
How to change the class of depending on its value in C # MVC Retrieve deleted data in SugarCRM