Question

我目前正在学习JS并致力于创建HTML发票。我想从输入的三个textareas中获取值，然后将它们添加到我的表的末尾（总计是自动计算的，其功能正常工作）。目前，我已使用

添加了空白字段

var obj={
    "foo": {
        "bar": "Common substitute word",
        "baz": "Another common substitute word",
        "questionWords": {
            "wat": "Inadequate question word",
            "wut": "Even more inadequate question word"
        }
    }
}

var obj2={
    "foo.questionWords.wut": "A question word to avoid"
}

for(var i in obj2){
	  var res = i.split(".");
    var fieldName = res.splice(res.length-1,1);
    var objField = res.reduce((r, u) => r && r[u] ? r[u] : '' , obj);
    objField[fieldName]=obj2[i];
}
console.log(obj);

但是当我点击添加

时，我不知道如何将我输入的三个值添加到表中

Image of table with empty fields added

Answer 1

您可以使用以下代码从文本区域获取文本。从文本框中获取所有三个文本并附加到表格的td

文字区域：

var bla = $('textarea:input[name=txt_area]').val();

文字框：

var bla = $('#txt_name').val();

Answer 2

您可以将此代码用于您的要求

**var taskdescription = document.getElementById('taskdescription').value;
var hours = document.getElementById('hours').value;
var rate = document.getElementById('rate').value;
var amount = document.getElementById('amount').value;



var table = document.getElementById('table');
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode(taskdescription);
    td.appendChild(txt);

var td1 = document.createElement("td");
var txt1 = document.createTextNode(hours);
    td1.appendChild(txt1);

var td2 = document.createElement("td");
var txt2 = document.createTextNode(rate);
    td2.appendChild(txt2);

var td3 = document.createElement("td");
var txt3 = document.createTextNode(amount);
    td3.appendChild(txt3);

tr.appendChild(td);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

table.appendChild(tr);**

这会自动将您的数据附加到表

中

Answer 3

您需要从输入中获取值，然后在附加中连接它们。

试试这个：

$("#addrow").click(function(){
var itemName = $('#add-description').val();
var itemHours = $('#add-hours').val();
var itemRate = $('#add-rate').val();

$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea id="new-description">'+itemName+'</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><textarea class="cost">'+itemHours+'</textarea></td><td><textarea class="qty">'+itemRate+'</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();});

示例：CodePen

从不同的textareas中获取选择值并插入表中

3 个答案: