如何使用 SQL 将动态添加的输入中的数据保存到数据库表中？

如何解决如何使用 SQL 将动态添加的输入中的数据保存到数据库表中？

我需要一些帮助来向我解释如何将动态添加的输入中的数据保存到我的 SQL 数据库表中。

我正在做的是创建一个在线报价/发票网站，您可以在其中创建报价，然后保存数据或打印为 pdf。（我目前正在处理“保存数据”位:-)）

因此，通过添加输入字段（文本框），我使用了如下所示的 Java 脚本：

D:/folder/gadfg5/asbsda
D:/folder/546sfdgh/hhdt5463

在我的“NewQuote.aspx”页面上，我有这个：

flutter run

所以最终结果看起来像这样（当然还有 CSS :-)）

enter image description here

如您所见，您可以添加新行并插入一些数据。如果您将鼠标悬停在输入行上，则会弹出一个“minues”符号，您可以在其中删除该行。它还会自动乘以和添加必要的字段以显示总金额。所有这些都很好用，但我现在想将它保存到我的 SQL 数据库表中。为此，我创建了表格，如下所示：

(function (document) {
var
    head = document.head = document.getElementsByTagName('head')[0] || document.documentElement,elements = 'article aside audio bdi canvas data datalist details figcaption figure footer header 
    hgroup mark meter nav output picture progress section summary time video x'.split(' '),elementsLength = elements.length,elementsIndex = 0,element;

while (elementsIndex < elementsLength) {
    element = document.createElement(elements[++elementsIndex]);
}

element.innerHTML = 'x<style>' +
    'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
    'audio[controls],canvas,video{display:inline-block}' +
    '[hidden],audio{display:none}' +
    'mark{background:#FF0;color:#000}' +
    '</style>';

return head.insertBefore(element.lastChild,head.firstChild);
})(document);

(function (window,ElementPrototype,ArrayPrototype,polyfill) {
function NodeList() { [polyfill] }
NodeList.prototype.length = ArrayPrototype.length;

ElementPrototype.matchesSelector = ElementPrototype.matchesSelector ||
    ElementPrototype.mozMatchesSelector ||
    ElementPrototype.msMatchesSelector ||
    ElementPrototype.oMatchesSelector ||
    ElementPrototype.webkitMatchesSelector ||
    function matchesSelector(selector) {
        return ArrayPrototype.indexOf.call(this.parentNode.querySelectorAll(selector),this) > -1;
    };

ElementPrototype.ancestorQuerySelectorAll = ElementPrototype.ancestorQuerySelectorAll ||
    ElementPrototype.mozAncestorQuerySelectorAll ||
    ElementPrototype.msAncestorQuerySelectorAll ||
    ElementPrototype.oAncestorQuerySelectorAll ||
    ElementPrototype.webkitAncestorQuerySelectorAll ||
    function ancestorQuerySelectorAll(selector) {
        for (var cite = this,newNodeList = new NodeList; cite = cite.parentElement;) {
            if (cite.matchesSelector(selector)) ArrayPrototype.push.call(newNodeList,cite);
        }

        return newNodeList;
    };

ElementPrototype.ancestorQuerySelector = ElementPrototype.ancestorQuerySelector ||
    ElementPrototype.mozAncestorQuerySelector ||
    ElementPrototype.msAncestorQuerySelector ||
    ElementPrototype.oAncestorQuerySelector ||
    ElementPrototype.webkitAncestorQuerySelector ||
    function ancestorQuerySelector(selector) {
        return this.ancestorQuerySelectorAll(selector)[0] || null;
    };
})(this,Element.prototype,Array.prototype);


function generateTableRow() {
var emptyColumn = document.createElement('tr');


emptyColumn.innerHTML = '<td><a class="cut" title="Remove Item">-</a><span contenteditable></span> 
</td>' +
    '<td><span contenteditable></span></td>' +
    '<td><span data-prefix>₹</span><span contenteditable>0.00</span></td>' +
    '<td><span contenteditable>1</span></td>' +
    '<td><span data-prefix>₹</span><span>0.00</span></td>';

return emptyColumn;
}

function parseFloatHTML(element) {
return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g,'')) || 0;
}

function parsePrice(number) {
return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g,'$1,');
}

function updateNumber(e) {
var
    activeElement = document.activeElement,value = parseFloat(activeElement.innerHTML),wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));

if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
    e.preventDefault();

    value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
    value = Math.max(value,0);

    activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
}

updateInvoice();
}


function updateInvoice() {
var total = 0;
var cells,price,total,a,i;


for (var a = document.querySelectorAll('table.inventory tbody tr'),i = 0; a[i]; ++i) {
    // get inventory row cells
    cells = a[i].querySelectorAll('span:last-child');

    // set price as cell[2] * cell[3]
    price = parseFloatHTML(cells[2]) * parseFloatHTML(cells[3]);

    // add price to total
    total += price;

    // set row total
    cells[4].innerHTML = price;
}

// get label cells
label_cells = document.querySelectorAll('table.balance th span:last-child');
tax_rate = label_cells[1].innerHTML / 100;

// get balance cells
cells = document.querySelectorAll('table.balance td:last-child span:last-child');

// set total
cells[0].innerHTML = total;

// set tax
cells[1].innerHTML = parsePrice(total * tax_rate);

// set balance and meta balance
cells[2].innerHTML = document.querySelector('table.meta tr:last-child td:last-child span:last- 
child').innerHTML = parsePrice(total + parseFloatHTML(cells[1]));

var prefix = document.querySelector('#prefix').innerHTML;
for (a = document.querySelectorAll('[data-prefix]'),i = 0; a[i]; ++i) a[i].innerHTML = prefix;

for (a = document.querySelectorAll('span[data-prefix] + span'),i = 0; a[i]; ++i) if 
(document.activeElement != a[i]) a[i].innerHTML = parsePrice(parseFloatHTML(a[i]));
}

function onContentLoad() {
updateInvoice();

var
    input = document.querySelector('input'),image = document.querySelector('img');

function onClick(e) {
    var element = e.target.querySelector('[contenteditable]'),row;

    element && e.target != document.documentElement && e.target != document.body && element.focus();

    if (e.target.matchesSelector('.add')) {
        document.querySelector('table.inventory tbody').appendChild(generateTableRow());
    }
    else if (e.target.className == 'cut') {
        row = e.target.ancestorQuerySelector('tr');

        row.parentNode.removeChild(row);
    }

    updateInvoice();
}

function onEnterCancel(e) {
    e.preventDefault();

    image.classList.add('hover');
}

function onLeaveCancel(e) {
    e.preventDefault();

    image.classList.remove('hover');
}

function onFileInput(e) {
    image.classList.remove('hover');

    var
        reader = new FileReader(),files = e.dataTransfer ? e.dataTransfer.files : e.target.files,i = 0;

    reader.onload = onFileLoad;

    while (files[i]) reader.readAsDataURL(files[i++]);
}

function onFileLoad(e) {
    var data = e.target.result;

    image.src = data;
}

if (window.addEventListener) {
    document.addEventListener('click',onClick);

    document.addEventListener('mousewheel',updateNumber);
    document.addEventListener('keydown',updateNumber);

    document.addEventListener('keydown',updateInvoice);
    document.addEventListener('keyup',updateInvoice);

    input.addEventListener('focus',onEnterCancel);
    input.addEventListener('mouseover',onEnterCancel);
    input.addEventListener('dragover',onEnterCancel);
    input.addEventListener('dragenter',onEnterCancel);

    input.addEventListener('blur',onLeaveCancel);
    input.addEventListener('dragleave',onLeaveCancel);
    input.addEventListener('mouseout',onLeaveCancel);

    input.addEventListener('drop',onFileInput);
    input.addEventListener('change',onFileInput);
}
}

window.addEventListener && document.addEventListener('DOMContentLoaded',onContentLoad);


function serial_file() {
document.getElementById("serial").value = Date.now();
}

function un_serial_file() {
document.getElementById("serial").value = "";
}

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
dd = '0' + dd;
}

if (mm < 10) {
mm = '0' + mm;
}



today = dd + '/' + mm + '/' + yyyy;
today_form = yyyy + '-' + dd + '-' + mm + ' ';
var serial = Date.now();

function myprint() {
window.print();
}

你可以猜到这就是我被卡住的地方:-(不，我之前保存了表单数据，通过提供文本框 ID 和值并将其保存到数据库中，这非常简单。但这是一个完全不同的球类游戏并且不确定如何实现这一目标。

我已经涵盖了问题中的大部分内容，但如果您需要更多信息，请告诉我。

编辑

如果有更简单的方法可以实现这一点，我全神贯注:-) 也许是关于创建发票/报价网络表单应用程序的教程？

我现在又试了一次，但似乎无法弄清楚:-(

谢谢

解决方法

我希望您使用 GridView 控件以不同的方式处理它。当您单击“+”按钮时，您将保存已添加到表格中的一行；绑定 gridview 从表中获取记录；并显示包含必要字段的行，如总金额。

还有另一种使用 DataTable 的方法。创建一个 DataTable 并将这些行保存到 DataTable。然后放置另一个名为“保存”的按钮，它将 DataTable 中的那些记录保存到 Table 中。保存并刷新屏幕后，将保存的记录带到DataTable中，在屏幕上显示行。

如果您使用的是 jquery，则可以通过创建您添加的输入的 JSON 对象来实现。

为多行创建 JSON 对象
进行 ajax 调用以将 JSON 对象传递给 Web 方法。
通过解析 JSON 对象填充数据表
创建用户定义的表为我们希望传递的数据表键入 SQL。
将数据表传递给存储过程，然后在 SP 中根据需要处理数据。

如何使用 SQL 将动态添加的输入中的数据保存到数据库表中？

如何解决如何使用 SQL 将动态添加的输入中的数据保存到数据库表中？

解决方法

相关推荐