在html表中將值顯示為按鈕單擊時的json數組無法正常工作

Question

用戶可以在html表中存在的部分或全部行中輸入值，然后單擊“提交”按鈕。 如果行中存在一個值（如果輸入了至少一個列字段值），並且單擊了提交按鈕，那么我想將所有詳細信息作為json數組獲取。

工作示例演示： http : //jsfiddle.net/Crw2C/173/

在上面的工作演示中，當用戶單擊轉換按鈕時，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數組，但我只需要該值。 當我嘗試搜索並嘗試以不同方式嘗試但無法成功時，任何示例代碼都將不勝感激。 我嘗試的示例代碼也在上面的演示鏈接中共享，但無法正常工作。 謝謝。

Answer 1

在列循環中，您不想分配單元格的整個html。 而是，您只需要包含在單元格中的選擇框的值。

換句話說：將循環中的$(item).html()更改$(item).html() $(item).find('select').val() 。

Answer 2

您應該更改這部分代碼

$('#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，但是您真正想要的是輸入和選擇值。

Answer 3

您選擇的是整個<td>...</td>而不是此select 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()">