javascript - 如何删除行并在文本区域中显示删除的行(标题除外)？

Question

我正在尝试创建一个允许用户发送订单请求的网页。我希望使用 Javascript 在文本区域中显示其顺序或更改的摘要。

我尝试将其存储在数组中，但文本区域值返回为“未定义”。我在 textArea 中收到未定义或 [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>

/* 我想将数组放在文本区域中，以便将来我可以发送电子邮件。我认为我处理问题的方法是错误的。如果有其他方法来处理问题会更好。请帮忙*/

Answer 1

我编了一个小例子来解释这个概念(非常简单)，当然，您可以轻松地将其集成到您的代码中:

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>