代码之家 › 专栏 › 技术社区 › user3684675

在HTML表中显示值,因为单击按钮时的JSON数组未按预期工作

json html jquery javascript

user3684675 · 技术社区 · 6 年前

用户可以在HTML表中的部分或所有行中输入值,然后单击提交按钮。如果行中存在值(如果至少输入了一个列字段值),并且单击了提交按钮,那么我希望以JSON数组的形式获取所有详细信息。

工作样品演示: http://jsfiddle.net/Crw2C/173/

在上面的工作演示中,当用户单击convert按钮时,来自HTML表的数据显示为JSON数组。我在我的演示中尝试了类似的实现,如下面的代码所示,但它没有按预期工作。

我的 不起作用的示例演示代码 正如预期的那样: http://plnkr.co/edit/FODEJ1BnhPLGHoH9kjO5?p=preview

示例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>
             .......

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);
    });

注意:使用上面的代码,整个HTML元素将被检索并存储为JSON数组,但我只需要该值。任何示例代码都会受到赞赏,因为我尝试以不同的方式搜索和尝试,但无法成功。我尝试的示例代码也在上面的演示链接中共享,但这不起作用。谢谢。

3 回复 | 直到 6 年前

Aquib Iqbal 6 年前

你在选择整体 <td>...</td> 而不是选择HTML input 或 select 元素。

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

检查下面的代码段。

    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()">

Heiko Jakubzik 6 年前

在列循环中,不希望分配单元格的整个HTML。相反,您只需要单元格中包含的选择框的值。

换言之:改变 $(item).html() 在你的循环中 $(item).find('select').val() .

Lorenzo S 6 年前

你应该改变这部分代码

$('#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);
});

您正在选择 <td> HTML,但您真正想要的是输入和选择值。