Question

单击按钮时，它将调用函数GenerateTable()并根据下拉列表中的多个选项动态创建表格作为表格列标题。下面是我的javascript代码，然后如何为单元格中的每个文本字段提供id和名称？另外，我在动态创建的表中有一个按钮用于添加新行，下面是添加和删除行的功能。这是我的代码

function GenerateTable() {
     var selected = [];
     var rows=[];

     selected.push("S.No");
     selected.push("Drawing No");

     rows.push("<td>&nbsp;</td>");
     rows.push("<input type=text size=3>");

        $.each($(".chosen-select option:selected"), function(){ 
            selected.push($(this).val());
            rows.push("<input type=text size=3>");
        });
     selected.push("<a id='addMore2' onClick='addRow();'><span class='glyphicon glyphicon-plus'></span></a>"); 
     rows.push("<a class='remove_row'><span class='glyphicon glyphicon-remove'></span></a>");

    //Create a HTML Table element.
    var table = document.createElement("TABLE");
    table.setAttribute('id', 'generated_table');
    table.setAttribute('class', 'table table-striped table-bordered table-hover');

    //Get the count of columns.
    var columnCount = selected.length;
    //Add the header row.
    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = selected[i];
        row.appendChild(headerCell);
    }

    //Add the data rows.
    row = table.insertRow(-1);
    for (var i = 0; i < rows.length; i++) {
        var rowCell = document.createElement("td");
        rowCell.innerHTML = rows[i];
        row.appendChild(rowCell);   
    }

    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);
}
function addRow() {
            var data = $("#generated_table tr:eq(1)").clone(true);
            $('#generated_table tr:last').before(data);
}

$(document).on('click', '.remove_row', function() {
            var trIndex = $(this).closest("tr").index();

                if(trIndex>1) {
                $(this).closest("tr").remove();
            } else {

            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="btn" onclick="GenerateTable()" value="Add" id="add">                           
    <select multiple class="chosen-select" name="multi_drop" id="multi_drop">
                                   <option value="A">A</option>
                                   <option value="B">B</option>
                                   <option value="C">C</option>
                                   <option value="D">D</option>
                                   <option value="E">E</option>
        </select>
<div id="dvTable"></div>

Answer 1

使用＆＃34; setAttribute＆＃34;添加和编辑属性的方法（包括id和名称），take a look at this guide

Answer 2

使用jQuery循环遍历所有表格单元格

$('table tr td').each(function( index ) {
    $(this).attr('id', index); //the id must be unique!
    $(this).attr('name', 'whateveryouwant');
});

这是基本的。

您可以修改选择器以达到内部元素：

$('table tr td a').each(function( index ) {
    $(this).attr('id', index); //the id must be unique!
    $(this).attr('name', 'whateveryouwant');
});

如果要在创建元素时添加ID和其他属性，请修改代码：

//Add the data rows.
row = table.insertRow(-1);
for (var i = 0; i < rows.length; i++) {
    var rowCell = document.createElement("td");
    rowCell.innerHTML = rows[i];

    rowCell.setAttribute("id", someUniqueId);
    rowCell.setAttribute("class", someClassName);

    row.appendChild(rowCell);   
}

请记住，元素的id在整个文档中必须是唯一的，因此您必须跟踪使用的ID

如何使用javascript为每个单元格动态创建可编辑的html表提供id和名称

2 个答案: