HTML / JavaScript:点击按钮后,在表格中添加新行

时间:2019-06-19 06:35:37

标签: javascript html css

添加新行后出现问题。当我单击“添加新的”时,新行成功添加。问题是,“操作”列中的所有4个按钮无法正常运行。单击后,我将按钮“视图”设置为转到google.com,但仅在第一行成功。第二行及以后均失败。下面是我的代码。

$("#add_new").click(function () { 

    $("#maintable").each(function () {

        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td style="padding:5px;">' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
});

document.getElementById("myButton").onclick = function () {
    location.href = "dashboard.php";
};
    <table id="maintable" width="100%" cellpadding="0" cellspacing="0" 
class="pdzn_tbl1" border="#729111 1px solid">
        <tr>
            <th align="center">Roll No</th>
            <th align="center">First Name</th>
            <th align="center">Last Name</th>
            <th align="center">Action</th>
        </tr>
        <tr id="rows">
            <div style="padding-left: 5px">
                <td style="padding:5px;" width="20%">
                    <input type="text" name="rollno<? $i ?>" />
                </td>
                <td style="padding:5px;" width="20%">
                    <input type="text" name="firstname<? $i ?>" />
                </td>
                <td style="padding:5px;" width="20%">
                    <input type="text" name="lastname<? $i ?>" />
                </td>
                <td style="padding:5px;" width="40%">
                    <button type="button" id="myButton">View</button>
                    <button type="button">Edit</button>
                    <button type="button">Delete</button>
                </td>
            </div>
        </tr>
    </table>
        <br><button id="add_new">ADD NEW
        </button>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</script>

我能知道是什么问题吗?

0 个答案:

没有答案