从textarea项创建表行

时间:2018-02-17 17:10:14

标签: javascript jquery html append

我正在尝试从textarea获取输入并在现有的表体中生成表行。

输入(由textarea输入中的每个新行分隔的项目)

<textarea name="excel_data"></textarea>
<input id="test" type="button" value="Enter Items"/>

textarea行插入<tbody>

<tbody class="output">
    <!-- Append Rows Here -->
</tbody>

使用下面的内容我会在<tbody>中获得一个完整的新表格。如何从<tr>获取var markup行?为tr或td元素编辑var tablevar row会产生错误或根本没有错误。我错过了什么?

$("#test").click(function() {
    var data = $('textarea[name=excel_data]').val();
    console.log(data);
    var rows = data.split("\n");

    var table = $('<tr />');

    for(var y in rows) {
        var cells = rows[y].split("\t");

        for(var x in cells) {

        var markup = 
            +'<td><span class="fsize14">'+cells[x]+'</span><input type="hidden" id="part" value="'+cells[x]+'" name="part[]"><br><input type="text" id="datasheet" class="" name="datasheet[]" placeholder="Data sheet (URL)..."></td>'
            +'<td> sadgsdg  <input type="hidden" id="descrip" value="" name="descrip[]"></td>'
            +'<td><input required type="text" id="qty" class="form-control qty" value="" name="qty[]" placeholder="Qty"></td>'
            +'<td>'
                +'<div class="input-group">'
                +'<div class="input-group-addon">&nbsp;<i class="fas fa-dollar-sign"></i>&nbsp;</div>'
                    +'<input required type="text" id="price" class="form-control price" value="" name="price[]" placeholder="Price">'
                +'</div>'
            +'</td>'
            +'<td>'
                +'<div class="input-group">'
                +'<div class="input-group-addon">&nbsp;<i class="fas fa-dollar-sign"></i>&nbsp;</div>'
                    +'<input type="text" id="net" class="form-control total" value="0.00" name="net[]" placeholder="Total">'
                +'</div>'
            +'</td>'
            +'<td><input type="text" id="notes" class="form-control" name="notes[]" placeholder="Notes..."></td>'
            +'<td><div class="deleteRow"><i class="fas fa-minus-circle text-danger"></i></div></td>'
            ;
        }

    table.append(markup);
    }
    $('.output').html(table);
});

0 个答案:

没有答案