Question

我有一个带有文本区域的HTML表单，用户可以在其中粘贴数据行。 generateTable函数从文本区域获取数据并对其进行处理，以使其将在文本区域下方生成一个HTML表。很容易。

在将字符串的长度添加到粘贴到文本区域的每一行的原始字符串上，并在将其插入DOM中的表之前，在每行后面附加一个“;”，使事情变得很复杂。

因此，如果您粘贴或键入“ value1”之类的行，则提交将呈现“ value1; 6”到表格的第一行。同样，如果文本区域的第二行包含“值2”，则提交将呈现“值2； 7”到表格的第二行。

我的问题是我想在分号处拆分新值，并将字符串的每一面呈现到同一行中自己的单元格中。我对此感到很困惑，为此我做的每一次尝试都变成了一些令人困惑的意大利面条。

将分号的每一面呈现到同一行中自己的单元格的最佳方法是什么？第一列为“ value1”，第二列为“ 6”？

我了解如何分割字符串。将每个元素呈现到表中自己的列是我的挑战。

// Get data inserted into the textarea and put in table below it //

// Create an array of the row values from the form
        function generateTable() {
            var data = $('textarea[name=excel_data]').val();
            var rows = data.split("\n");
            var rowCount = rows.length;
            var newArray = [];
                for (i = 0; i < rowCount; i++){
                var newRow = rows[i] + "; " + rows[i].length;

                var newRowString = JSON.stringify(newRow);

                newArray.push(newRow);

                }

// Build the table    
            var table = $('<table />');

            for (var y in newArray) {
                var cells = newArray[y].split("\t");
                var row = $('<tr />');
                for (var x in cells) {
                    row.append('<td>' + cells[x] + '</td>');
                }
                table.append(row);
            }

// Insert into DOM
            $('#excel_table').html(table);
        }

Answer 1

尝试这种方式：

// Build the table    
        var table = $('<table />');

        for (var y in newArray) {
            var cells = newArray[y].split("\t");
            var row = $('<tr />');
            for (var x in cells) {
                row.append('<td>' + cells[x].split(";")[0] + '</td>');
                row.append('<td>' + cells[x].split(";")[1] + '</td>');
            }
            table.append(row);
        }

Answer 2

尝试

function add() {
  let v = data.value;
  data.value='';
  out.innerHTML+="<tr>"+v.split(';').map(x=>`<td>${x}</td>`).join('')+"</tr>"
}

td { border: 1px solid black}

<textarea id="data" ></textarea>
<button onclick="add()">Add</button>

<table>
  <tbody id="out">
    
  </tbody>
</table>

如何通过定界符将字符串拆分到同一行的HTML表的自己的列中？

2 个答案: