Question

如何调整此代码以使由函数创建的行可选。然后，我将使用它作为表单的一部分来操作指定行中的数据。

function staffData() {
    if (firstTimeS) {
        firstTimeS = false;
        // Select the Table
        var tbl = document.getElementById('staffInnerTable');
        var th = document.getElementById('tableHead_S');
        var headerText = ["ID", "Staff Name", "Role"];
        // Set number of rows
        var rows = 10;
        // Set number of columns
        var columns = headerText.length;

        // create table header
        for (var h = 0; h < columns; h++) {
            var td = document.createElement("td");
            td.innerText = headerText[h];            
            th.appendChild(td);
        }

        // create table data
        for (var r = 0; r < rows; r++) { 
            var cellText = ["UNDEFINED", "UNDEFINED", "UNDEFINED"];
            // generate ID
            x = getRandomNumber(1000, 1);
            cellText[0] = x;
            // generate Status
            x = generateName();
            cellText[1] = x;                    
            // generate Role
            x = getRole();
            cellText[2] = x;



            var tr = document.getElementById("s_row" + r);
            for (var c = 0; c < columns; c++) 
            {
                var td = document.createElement("td");        
                td.innerText = cellText[c];
                tr.appendChild(td);                                    
            }
        }
    }
}

编辑 - HTML。 Tr已在html中定义。是否有可能以某种方式对表行进行onclick？

            <table style="width: 100%; color:white;" id="staffInnerTable">
                <tr id="tableHead_S">
                </tr>

                <tr id="s_row0"></tr>
                <tr id="s_row1"></tr>
                <tr id="s_row2"></tr>
                <tr id="s_row3"></tr>
                <tr id="s_row4"></tr>
                <tr id="s_row5"></tr>
                <tr id="s_row6"></tr>
                <tr id="s_row7"></tr>
                <tr id="s_row8"></tr>
                <tr id="s_row9"></tr>

            </table>

Answer 1

如果你这样做：

        var tr = document.getElementById("s_row" + r);

        tr.onclick = function(event) {
          alert('Clicked: ' + event.target.parentNode.id)
        }

...你会看到检测到一个点击，告诉你点击了哪一行。希望这足以让你开始做任何你想做的事情。

如何调整此代码以使行可选？

1 个答案: