我正在尝试创建一个允许用户发送订单请求的网页。我想要使用Javascript在textArea中显示他们的订单或更改的摘要。
我已经尝试将它存储在一个数组中,但textarea值返回Undefined。我要么在textArea中获得Undefined或[Object HTML]
使用ID将行添加到表
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
row.id = rowCount;
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
newcell.id= i+1;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
// DELETE ROW and try to add to array and set value of textarea
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows.cells.length;
var rowInfo = new Array();
for (var i = rowCount - 2; i > 0; i--) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked ) {
for(var m = 1;m<rowInfo.l;m++)
{
rowInfo.push(table.rows[i].cells[m]);
document.getElementById("myEmail").value = rowInfo[0];
}
if(rowCount >0){
table.deleteRow(i);
rowCount--;
}
}
}
}catch(e) {
alert("Please select Part you want to remove");
}
}
<table id="PartTable" class="table table-bordered table-responsive-sm table-striped text-center">
<thead>
<th class="text-center">Select</th>
<th class="text-center">Part Number</th>
<th class="text-center">Old Quantity</th>
<th class="text-center">New Quanity</th>
<td class="text-center">Price</td>
</thead><!-- END OF TABLE HEADERS-->
<!-- BEGINNING OF TABLE DATA-->
<tr id="firstrow">
<td id="selected" ><input class="form-check-input" type="checkbox" ></td>
<td id="0"contenteditable="true"><input type="text" class="form-control" name="partNumber"></td>
<td id="0"contenteditable="true"><input type="text" class="form-control" name="oldquanity"></td>
<td id="0" contenteditable="true"><input type="text" class="form-control" name="newquantity"></td>
<td id="0" contenteditable="true">$<input type="text" class="form-control" name="price"></td>
</tr>
</table>
<div>
<label for="myEmail">EMAIL</label>
<textarea id="myEmail" class="form-control" rows="3">
</textarea>
</div>
/ *我想将数组放在Textarea中,以便将来我可以发送电子邮件。我认为我正在接近错误的问题..如果还有其他方法可以解决问题,那就更好了。请帮忙 */
我已经编写了一个小例子来解释这个概念(这很简单),当然,你可以轻松地将它集成到你的代码中:
var srcData = [
{name: 'Mickey', color: 'orange', weapon: 'nunchucks'},
{name: 'Leo', color: 'blue', weapon: 'sword'},
{name: 'Don', color: 'purple', weapon: 'bo'},
{name: 'Raph', color: 'red', weapon: 'sai'},
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title: 'name', data: 'name'},
{title: 'color', data: 'color'},
{
title: 'weapon',
data: 'weapon',
render: data => data+'<button>x</button>'
},
]
});
$('#mytable').on('click', 'button', function(){
let rowClicked = dataTable.rows($(this).closest('tr'));
let msg = Object.values(rowClicked.data()[0]).toString();
$('#msg').val($('#msg').val()+msg+"\n");
rowClicked.remove();
dataTable.draw();
})
td button {float: right}
textarea {width: 100%}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="mytable"></table>
<textarea id="msg"></textarea>
</body>
</html>