HTML - 表格 - 编辑行,由javascript选择的选项

时间:2017-04-09 19:18:09

标签: javascript html

Demo on jsfiddle

尝试让ether tb_edit_row(x)或tb_edit2_row(x)正常工作。

执行两个功能时。我得到的结果与<option value="0">Select One...</option>相同,但我应该得到结果:<option value="2">Admin</option>

HTML:

    <form action="#">
        <table id="myTable">
            <tr>
                <td><button disabled>Add</button></td>
                <td>ID</td>
                <td>Access</td>
            </tr>
            <tr>
                <td><button id="tb_edit_1" onclick="tb_edit_row(1)">Edit</button></td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td><button id="tb_edit_2" onclick="tb_edit2_row(2)">Edit</button></td>
                <td>2</td>
                <td>2</td>
            </tr>
        </table>
    </form>

Java脚本:

tb_edit_row(x)的

function tb_edit_row(x) {
    var tb_Name, tb_Length, check, ID, Access, edit, submit;

    tb_Name = document.getElementById('myTable');
    tb_Length = tb_Name.rows.length;
    for (var i = 1; i <= tb_Length; i += 1) {
        check = tb_Name.rows[i].cells[1].innerHTML;
        if (check == x) {
            ID = tb_Name.rows[i].cells[1].innerHTML;
            Access = tb_Name.rows[i].cells[2].innerHTML;
            tb_Name.rows[i].cells[0].innerHTML = '<input type="submit" value="Submit">';
            tb_Name.rows[i].cells[1].innerHTML = '<input type="text" disabled value="'+ID+'">';
            tb_Name.rows[i].cells[2].innerHTML = '<select id="access_'+ID+'"><option value="0">Select One...</option><option value="1">User</option><option value="2">Admin</option></select>';
            document.getElementById('access_'+ID).selected = Access;
            break;
        }
    }
}

tb_edit2_row(x)的

function tb_edit2_row(x) {
    var tb_Name, tb_Length, check, ID, Access, edit, submit;

    tb_Name = document.getElementById('myTable');
    tb_Length = tb_Name.rows.length;
    for (var i = 1; i <= tb_Length; i += 1) {
        check = tb_Name.rows[i].cells[1].innerHTML;
        if (check == x) {
            ID = tb_Name.rows[i].cells[1].innerHTML;
            Access = tb_Name.rows[i].cells[2].innerHTML;
            tb_Name.rows[i].cells[0].innerHTML = '<input type="submit" value="Submit">';
            tb_Name.rows[i].cells[1].innerHTML = '<input type="text" disabled value="'+ID+'">';
            switch (Access) {
                case (1):
                    tb_Name.rows[i].cells[2].innerHTML = '<select id="access_'+ID+'"><option value="">Select One...</option><option value="1" selected>User</option><option value="2">Admin</option></select>';
                case (2):
                    tb_Name.rows[i].cells[2].innerHTML = '<select id="access_'+ID+'"><option value="">Select One...</option><option value="1">User</option><option value="2" selected>Admin</option></select>';
                default:
                    tb_Name.rows[i].cells[2].innerHTML = '<select id="access_'+ID+'"><option value="" selected>Select One...</option><option value="1">User</option><option value="2">Admin</option></select>';
            }
        }
    }
}

0 个答案:

没有答案