Получение значений из редактируемого столбца в таблице HTML - PullRequest
Новая
       4

Получение значений из редактируемого столбца в таблице HTML

0 голосов
/ 15 апреля 2020

У меня есть таблица HTML, в которую я включил редактируемые столбцы. Если в таблице 5 строк, пользователь обновит все строки для столбца col1 строка за строкой, а затем обновит все строки для столбца col2 строка за строкой et c. Поскольку пользователь обновляет значения в столбце col1, мне нужно получить новые значения и поместить их в массив и выполнить некоторые вычисления для значений. Так, например, когда пользователь находится в строке 1 col1, массив будет иметь один элемент, а при редактировании строки 2 для col1 массив будет иметь 2 элемента и т. Д. c.

Вот моя таблица: 

<table id="myGrid" class="table table-bordered table-striped">
    <tr>
       <th>Iteration</th>
       <th class="CalCol1" id="CalColHdr1">Vol1</th>
       <th class="CalCol2" id="CalColHdr2">Vol2</th>
       <th class="CalCol3" id="CalColHdr3">Vol3</th>
       <th class="CalCol4" id="CalColHdr4">Vol4</th>
       <th class="CalCol5" id="CalColHdr5">Vol5</th>
    </tr>
    @foreach (var item in Model.Volumes)
    {
       <tr>
          <td >@Html.DisplayFor(modelItem => item.RunNumber)</td>
          <td class="CalCol1">@Html.EditorFor(modelItem => item.Column1)</td>
          <td class="CalCol2">@Html.EditorFor(modelItem => item.Column2)</td>
          <td class="CalCol3">@Html.EditorFor(modelItem => item.Column3)</td>
          <td class="CalCol4">@Html.EditorFor(modelItem => item.Column4)</td>
          <td class="CalCol5">@Html.EditorFor(modelItem => item.Column5)</td>
       </tr>
    }
</table>

У меня есть функция Change, которая срабатывает, когда пользователь изменяет значения в столбцах: 

$("#myGrid   tr   td").change(function (e) {
    var value = e.innerHTML;
    var i = 0;
    var col = $(this).parent().children().index($(this)) ;
    var row = $(this).parent().parent().children().index($(this).parent());
    col++ ;
    alert('Row: ' + row + ', Column: ' + col + ' value:' + value);
    var vals = new Array();

    // This gets all rows for the specified column, excluding a "hidden"row at position 1
    $("#myGrid tr:gt(1) td:nth-child("+col+")").each(function() {
        var t = $(this).html();
        alert("value " + t);
        if($.inArray(t, vals) < 0)
        {
            vals[i]=t;
            i++;
        }        
});

Это срабатывает правильно, и я могу перебирать каждую строку для «обновленного» столбца, но когда я сделать оповещение («значение» + т); он всегда печатает ноль для связи «значение» в предупреждающем сообщении.

Исключением является первый столбец, если я использую «1» для переменной col, то он выводит значение для столбца «Итерация» так, как вы ожидаете. Но я предполагаю, что, поскольку другие столбцы являются редактируемыми, то есть отображаются как "html -входные теги", он не может получить значения?

Когда я проверяю страницу, вот как отображается строка: 

<tr>

  <td >1</td>
  <td class="CalCol1"><input class="text-box single-line" id="item_Column1" name="item.Column1" type="text" value="" /></td>
  <td class="CalCol2"><input class="text-box single-line" id="item_Column2" name="item.Column2" type="text" value="" /></td>
  <td class="CalCol3"><input class="text-box single-line" id="item_Column3" name="item.Column3" type="text" value="" /></td>
  <td class="CalCol4"><input class="text-box single-line" id="item_Column4" name="item.Column4" type="text" value="" /></td>
  <td class="CalCol5"><input class="text-box single-line" id="item_Column5" name="item.Column5" type="text" value="" /></td>
</tr>

Как получить значения, введенные пользователем в редактируемый столбец для всех строк в таблице?

1 Ответ

1 голос
/ 16 апреля 2020

Использование бритвы и Jquery немного отличается.

Если вы проверите элемент HTML DOM созданных ячеек, вы увидите, что создан весь новый элемент input. 

<td class="CalCol1">
  <input class="text-box single-line" data-val="true" data-val-number="The field          Colunm1 must be a number." data-val-required="The Colunm1 field is required." id="item_Colunm1" name="item.Colunm1" type="number" value="3453">
</td>

Таким образом, ваш value находится внутри этого элемента ввода. Вы должны получить доступ там.

поэтому передайте этот объект DOM в l oop следующим образом .each(function (item, element)

Затем получите значение каждого входного элемента.

Вот полный код. 

<script type="text/javascript">
        $("#myGrid tr td").keyup(function (e) {
            var value = e.key;
            var i = 0;
            var col = $(this).parent().children().index($(this));
            var row = $(this).parent().parent().children().index($(this).parent());
            col++;
           // alert('Row: ' + row + ', Column: ' + col + ' value:' + value);
            var vals = new Array();

            // This gets all rows for the specified column, excluding a "hidden"row at position 1
            $("#myGrid tr:gt(1) td:nth-child(" + col + ")").each(function (item, element) {
                var t = $(this).value;
                var inputs = element.firstChild;
                var cellValue = $(inputs)[0].value;

                if ($.inArray(cellValue, vals) < 0) {
                    vals[i] = cellValue;
                    i++;
                }
            });

            console.log(vals);
        });
    </script>

И я использовал keyup событие вместо change. Надеюсь это поможет.

...