manish-gusain8909 Ответов: 1

Как передать данные из таблицы dyanmic(значения добавляются через javascript) в контроллер

у меня есть три три текстовых поля из них. Имя", "обозначение", "возраст", значения которых я привязываю к HTML-таблице с помощью javascript, который работает нормально.

Теперь я хочу передать данные HTML-таблицы(которая привязана через javascript) контроллеру при нажатии кнопки для сохранения в базе данных.

Что я уже пробовал:

@{
    Layout = null;
}

<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
    // ARRAY FOR HEADER.
    var arrHead = new Array();
    arrHead = ['', 'Emp. Name', 'Designation', 'Age'];      // SIMPLY ADD OR REMOVE VALUES IN THE ARRAY FOR TABLE HEADERS.

   
    // ADD A NEW ROW TO THE TABLE.s
    function addRow() {
        var empTab = document.getElementById('empTable');

        var rowCnt = empTab.rows.length;
        var tr = empTab.insertRow(rowCnt);      // TABLE ROW.
        tr = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');          // TABLE DEFINITION.
            td = tr.insertCell(c);

            if (c == 0) {           // FIRST COLUMN.
                // ADD A BUTTON.
                var button = document.createElement('input');

                // SET INPUT ATTRIBUTE.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');

                // ADD THE BUTTON's 'onclick' EVENT.
                button.setAttribute('onclick', 'removeRow(this)');

                td.appendChild(button);
            }
            else {
                if (c == 1) {
                    var values = document.getElementById("empname").value;
                }
                if (c == 2) {
                    var values = document.getElementById("empdesignation").value
                }
                if (c == 3) {
                    var values = document.getElementById("empage").value
                }
                //alert(values);
                // CREATE AND ADD TEXTBOX IN EACH CELL.
                var ele = document.createElement('LABEL');
                ele.setAttribute('type', 'text');
                //  ele.setAttribute('text', '1');
                ele.innerHTML = values;
                td.appendChild(ele);
            }
        }
    }

    // DELETE TABLE ROW.
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);       // BUTTON -> TD -> TR.
    }

   
</script>

<html>
<head>
    <title>Dynamically Add Remove Table Rows in JavaScript</title>

    <style>
        table 
        {
            width: 70%;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
    </style>
</head>
<body >
    <input type=text id="empname"  />
    <input type=text id="empdesignation"   />
    <input type=text id="empage" />
    <p>
        <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    </p>

    <table id="empTable" class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
    <th></th>
    <th>Emp. Name</th>
    <th>Designation</th>
    <th>Age</th>
    </tr>
    <tbody>
      <tr>
      </tr>
      </tbody>
    </table>
    <div id="cont"></div>

    <p><input type="button" id="bt" value="Sumbit Data" onclick="sumbit()" /></p>
</body>


</html>

1 Ответов

Рейтинг:
2

F-ES Sitecore

При создании элементов метки также создайте элемент "input" с "type=hidden" и "name" из "empname[0]", где вы увеличиваете число в скобках для каждой строки и добавляете свои данные в атрибут "value", а также добавляете его в свою метку. Таким образом, у вас должны быть такие поля, как;

<input type="hidden" name="empname[0]" value="Joe"/>
<input type="hidden" name="empname[1]" value="Pete"/>
<input type="hidden" name="empname[2]" value="Dave"/>


Сделайте это для каждого столбца, который у вас есть (конечно, изменив имя). Убедитесь, что таблица находится в элементе формы, а затем отправьте эту форму через ajax в действие контроллера (google "submit form jquery ajax" для примера кода). Убедитесь, что ваше действие имеет такие параметры, как;

public ActionResult SubimitData (string[] empname, string[] empdesignation, ...)


Обновление:

Ваш скрипт устанавливает атрибут "имя" метки, но метки не представляются в форме, вы должны создать входные данные типа HIDDEN для хранения данных, как я уже сказал выше. Вы также используете "c" в качестве индекса для имени, которое является индексом столбца, поэтому вы получите такие имена, как

Строка 1 - empname[0]
Строка 2 - empname[0]
Строка 3 - empname[0]
Строка 1 - empdesignation[1]
Строка 2 - empdesignation[1]
Строка 3 - empdesignation[1]
Строка 1 - empage[2]
Строка 2 - empage[2]
Строка 3 - empage[2]

Вам нужны такие имена, как

Строка 1 - empname[0]
Строка 2 - empname[1]
Строка 3 - empname[2]
Строка 1 - empdesignation[0]
Строка 2 - empdesignation[1]
Строка 3 - empdesignation[2]
Строка 1 - empage[0]
Строка 2 - empage[1]
Строка 3 - empage[2]

Определите новую переменную для хранения текущей строки

var arrHead = new Array();
arrHead = ['', 'Emp. Name', 'Designation', 'Age'];
var rowIndex = 0;


Когда вы создаете метку, создайте и входные данные

var ele = document.createElement('LABEL');
ele.setAttribute('type', 'text');
var txt = document.createElement('input');
txt.setAttribute('type', 'hidden');


Установите имя текстового поля при обновлении метки (это нужно сделать в каждом из ваших блоков "if (c == x)", изменив имя соответствующим образом)

if (c == 1) {
    var values = document.getElementById("empname").value;
    txt.setAttribute('name', 'empname['+ rowIndex +']');
}


Присвойте текстовому полю значение и добавьте его в DOM при создании метки

ele.innerHTML = values;
txt.value = values;
td.appendChild(ele);
td.appendChild(txt);


Наконец увеличьте значение rowIndex так же как вы выходите из функции addRow

    rowIndex++;
}


Ваша функция remove также должна будет уменьшить значение rowIndex.

manish-gusain8909

данные текстовых элементов привязываются к таблице по кнопке(id="addRow")клика через функцию javascipt. но теперь я хочу передать значения таблицы(которые я добавил через javascript) в контроллер.

F-ES Sitecore

Я сказал тебе, что тебе нужно сделать, но я не собираюсь делать эту работу и за тебя тоже :) Вы понимаете, как создавать метки, поэтому создавайте и входные элементы.

manish-gusain8909

функция addRow() {
var empTab = document.getElementById('empTable');

var rowCnt = empTab.rows.length;
var tr = empTab.insertRow(rowCnt); // строка таблицы.
tr = empTab.insertRow(rowCnt);

for (var c = 0; c < arrHead.length; c++) {
var td = document.createElement('td'); // определение таблицы.
тд = тр.insertCell(с);

if (c == 0) { // первый столбец.
// ДОБАВИТЬ КНОПКУ.
кнопка var = document.createElement('input');

// УСТАНОВИТЬ ВХОДНОЙ АТРИБУТ.
кнопки.метод setAttribute (кнопка'тип','');
кнопки.метод setAttribute('значение', 'удалить');

// Добавьте событие кнопки "onclick".
button.setAttribute('onclick', 'removeRow(this)');

тд.кнопка метода appendChild();
}
еще {
var ele = document.createElement('LABEL');
эле.метод setAttribute('тип', 'текст');
если (c == 1) {
var values = document.getElementById("empname").value;
эле.метод setAttribute('имя', 'столбец empname ['с+']');
}
если (c == 2) {
ВАР значения = документ.метода getElementById("empdesignation").значение
ele.setAttribute('name', 'empdesignation[' + c + ']');
}
если (c == 3) {
var values = document.getElementById("empage").value
ele.setAttribute('name', 'empage[' + c + ']');
}
//alert(значения);
// СОЗДАЙТЕ И ДОБАВЬТЕ ТЕКСТОВОЕ ПОЛЕ В КАЖДУЮ ЯЧЕЙКУ.


// ele.setAttribute('text', '1');
ele.innerHTML = значения;
тд.метода appendChild(эле);
}
}
}
я попробовал, но ничего не вышло.

F-ES Sitecore

Это не сработало, потому что вы не реализовали то, что я предложил, вы добавили имя к метке, а не создали новое текстовое поле, и вы также используете неправильные индексы имен. Я обновил свое решение.