L'utilisateur peut entrer des valeurs dans certaines ou toutes les lignes présentes dans le tableau html et cliquer sur le bouton soumettre. Si une valeur est présente dans la ligne (si au moins une valeur de champ de colonne est entrée) et que le bouton d'envoi est cliqué, je veux obtenir tous les détails sous forme de tableau json.

Exemple de démonstration de travail: http://jsfiddle.net/Crw2C/173/

Dans la démonstration de travail ci-dessus, lorsque l'utilisateur clique sur le bouton de conversion, les données de la table html sont affichées sous forme de tableau json. J'ai essayé une implémentation similaire dans ma démo comme indiqué dans le code ci-dessous mais cela ne fonctionne pas comme prévu.

Mon exemple de code de démonstration qui ne fonctionne pas comme prévu: http: // plnkr.co/edit/FODEJ1BnhPLGHoH9kjO5?p=preview

Exemple de code html:

<table id="productTable" border="1">

    <tr>
        <th>Order ID</th>
        <th>Product1</th>
        <th>Description</th>
        <th>Product2</th>
         <th>Comments</th>
    </tr>

    <tr>
         <td><input type="text" name="orderNum" value=""></td>
         <td>
                           <select class="product1" > 
                           <option value=""></option>
                    </select>
                </td>
                <td>
              <input type="text" name="description" value="">
                </td>
             .......

Exemple de code js:

  $('#productTable th').each(function(index, item) {
        headers[index] = $(item).html();
    });
    $('#productTable tr').has('td').each(function() {
        var arrayItem = {};
        $('td', $(this)).each(function(index, item) {
            arrayItem[headers[index]] = $(item).html();
        });
        array.push(arrayItem);
    });

Remarque: Avec mon code ci-dessus, l'élément html entier est récupéré et stocké en tant que tableau json mais je ne veux que la valeur. N'importe quel exemple de code serait apprécié car j'ai essayé de rechercher et essayé de différentes manières mais je n'ai pas réussi. L'exemple de code que j'ai essayé j'ai également partagé dans le lien de démonstration ci-dessus, qui ne fonctionne pas. Merci.

0
user3684675 20 nov. 2018 à 10:11

3 réponses

Meilleure réponse

Vous sélectionnez l'ensemble des <td>...</td> au lieu de ces éléments html input ou select sélectionnés.

$('#productTable tr').has('td').each(function() {
    var arrayItem = {};
    $('td input, td select', $(this)).each(function(index) {
        arrayItem[headers[index]] = $(this).val();
    });
    array.push(arrayItem);
});

Vérifiez l'extrait ci-dessous.

    function populateSelect() {
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
      var productDropdown1 = $(".product1"); 
      var productDropdown2 = $(".product2");
      $.each(ids, function(index,value) {
      $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
        $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
      });
        
       $("select").change(function() {    
         var row = $(this).closest("tr");
         var product1_drop = $('.product1',row).val();
         var product2_drop = $('.product2',row).val();
         var descValue = $('input[name="description"]',row).val();
         if( product1_drop &&  product2_drop)
         		validate(product1_drop,product2_drop, descValue);
       }); 
                  
        $('input[name="description"]').on('input', function(e){
          var row = $(this).closest("tr");
          var product1_drop = $('.product1',row).val();
         	var product2_drop = $('.product2',row).val();
         console.log("-inut -product1_drop----- " + product1_drop);
        if( product1_drop &&  product2_drop)
        	validate(product1_drop,product2_drop, $(this).val());
        }); 
 }
 
 function validate(prod1, prod2, desc){
  	if(desc && prod1 === prod2 ){       
    alert('Product1 and Product2 cannot have same value');
  }
 }
 
 function submitData(){
   alert("submit");
   var array = [];
    var headers = [];
    $('#productTable th').each(function(index, item) {
        headers[index] = $(item).html();
    });
    $('#productTable tr').has('td').each(function() {
        var arrayItem = {};
        $('td input, td select', $(this)).each(function(index) {
            arrayItem[headers[index]] = $(this).val();
        });
        array.push(arrayItem);
    });

alert(JSON.stringify(array));
 }

$(document).ready(function(){
    populateSelect(); 
  //  $('#productTable tbody tr:gt(0) :input').prop('disabled',true)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productTable" border="1">
     
    <tr>
        <th>Order ID</th>
        <th>Product1</th>
        <th>Description</th>
        <th>Product2</th>
         <th>Comments</th>
    </tr>
    
    <tr>
         <td><input type="text" name="orderNum" value=""></td>
         <td>
			               <select class="product1" > 
			               <option value=""></option>
                    </select>
				</td>
				<td>
			  <input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >        
			                <option value=""></option>
                    </select>
				</td>  
			 <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr>
         <td><input type="text" name="orderNum" value=""></td>
         <td>
			               <select class="product1" >  
			                <option value=""></option>
                    </select>
				</td>
					<td>
			<input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >  
			                <option value=""></option>
                    </select>
				</td>
		    <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr>
         <td><input type="text" name="orderNum" value=""></td>
          <td>
			               <select class="product1" >  
			                <option value=""></option>
                    </select>
				</td>
					<td>
			<input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >  
			                <option value=""></option>
                    </select>
				</td>
			  <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr>
         <td><input type="text" name="orderNum" value=""></td>
          <td>
			               <select class="product1" > 
			                <option value=""></option>
                    </select>
				</td>
					<td>
			<input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >   
			                <option value=""></option>
                    </select>
				</td>
			  <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
   
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
0
Aquib Iqbal 20 nov. 2018 à 08:02

Vous devez changer cette partie du code

$('#productTable tr').has('td').each(function() {
    var arrayItem = {};
    $('td input, td select', $(this)).each(function(index, item) {
        arrayItem[headers[index]] = $(item).val();
    });
    array.push(arrayItem);
});

Vous sélectionnez le <td> html, mais ce que vous voulez vraiment, ce sont les valeurs d'entrée et de sélection.

0
Lorenzo S 20 nov. 2018 à 07:37

Dans votre boucle de colonne, vous ne souhaitez pas affecter l'intégralité du code HTML de la cellule. Au lieu de cela, vous avez juste besoin de la valeur de la zone de sélection contenue dans la cellule.

En d'autres termes: changez $(item).html() dans votre boucle sur les 'td's en $(item).find('select').val().

0
Heiko Jakubzik 20 nov. 2018 à 07:37