網格，從一個表中選擇Header_Id並從另一個表中選擇Content值，然后在數組Jquery中推送“帶有ID的值”

Question

我所擁有的是一個網格，由兩個表的組合形成。 一節包含標題內容和用戶添加的其他值。 以下是問題陳述。
我有一張桌子所在的div。 那就是網格頭。 另一個div中有表格。 包含值行。

示范：

  <div class="k-grid-header-wrap">

    <table role="grid" id="Header" cellspacing="0">

    <thead>
    <tr>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_47" data-title="Q1">Q1</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_48" data-title="Q2">Q2</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10048" data-title="Q3">Q3</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10049" data-title="Q4">Q4</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10050" data-title="Q5">Q5</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10051" data-title="Q7">Q7</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10052" data-title="Q8">Q8</th>
    <th class="k-header" role="columnheader" data-field="ColumnID_20_17_10053" data-title="Q9">Q9</th>
    <th class="k-header"></th>
    </tr>
    </thead>
    </table>
    </div>


    <div style="height: 260px;"  class="k-grid-content">

    <table role="grid" id="tbl_1" cellspacing="0">

    <tbody>
    <tr class="" data-uid="a692c39b" role="row">
    <td data-role="editable" class="" role="gridcell">1 </td>
    <td data-role="editable" class="" role="gridcell">2</td>
    <td data-role="editable" class="" role="gridcell">3</td>
    <td data-role="editable" class="" role="gridcell">4</td>
    <td data-role="editable" class="" role="gridcell">5</td>
    <td data-role="editable" class="" role="gridcell">6</td>
    <td data-role="editable" class="" role="gridcell">7</td>
    <td data-role="editable" class="" role="gridcell">eight</td>

    </tr>
    </tbody>
    </table>
    </div>

現在，我要針對的是用戶在網格中輸入的每一行，我想將具有ID的每個網格單元格值推送到另一個表。

因此，我所擁有的是：

function OnSave() {
        var answerArray = [];
        $("th[data-field*='_']").each(function () {

                var Columnid = $(this).attr('data-field');
                var Columntemp = Columnid.split('_');
                var ColumnSection = Columntemp[1];
                var ColumnQGroup = Columntemp[2];
                var ColumnQuestion = Columntemp[3];
                var ColumnRadiostatus = $(this).is(':checked');
                var rowNum = $(this).parent().parent().index();

                var ColumnValue;
                $("#div1 table tbody tr").map(function (index, elem) {
//                    $('td', this).each(function () {
                        var tmp = $(this).find('td');
                        ColumnValue = $(tmp).val() || $(tmp).text();

                        if (!(ColumnValue instanceof Array))
                        {
                            ColumnValue = [ColumnValue];
                        }
                        answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
                    //});

                });

        });

        var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
        PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers); 
    }
    function callBackUpdateAnswers(result) {
        alert(result);
        if (result == 'false') {
            return false;
        }
    }

Which return whole row against every question.

Expected Output answerArray(20, 17, Q1, 1);

What's Now: answerArray(20, 17, Q1, 123456789);

Any Help would be appreciated. Regards

Answer 1

以下是您的問題的解決方案：

function OnSave() {
            var answerArray = [];
            $("#Header th[data-field*='_']").each(function () {

                var Columnid = $(this).attr('data-field');
                var Columntemp = Columnid.split('_');
                var ColumnSection = Columntemp[1];
                var ColumnQGroup = Columntemp[2];
                var ColumnQuestion = Columntemp[3];
                var ColumnRadiostatus = $(this).is(':checked');
                var rowNum = $(this).parent().parent().index();

                var ColumnValue;
                ColumnValue = $('#tbl_1 tr:eq(' + $(this).parent().index() + ') td:eq(' + $(this).index() + ')').text();
                //alert("columnValue : " + ColumnValue);
                if (!(ColumnValue instanceof Array)) {
                    ColumnValue = [ColumnValue];
                }
                answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
            });

             var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
             PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers);
        }

在此處查看演示：

觀看演示