个人中心
gpt4 book ai didi

javascript - AddRow 和 Popup 的功能未按预期工作

转载 作者：行者123 更新时间：2023-11-28 07:26:00 25 4
gpt4 key购买 nike

我是开发领域的新手。这段代码有两个问题。首先，当我单击 add_Row 按钮时，屏幕上会添加一行，但它会在 1-2 秒后消失，同样的事情也会发生在 group_Create() 弹出窗口中。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Inventory Expert</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../../Bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../CSS/ProductMaster/ProductMaster.css"/>
    <link rel="stylesheet" href="../../CSS/ProductMaster/RawMaterialGroup.css"/>
    <script src="../../JAVASCRIPT/ProductMaster/ProductMaster.js"></script>
    <script src="../../JAVASCRIPT/ProductMaster/RawMaterialGroup.js"></script>
    <script src="../../jquery-1.11.2.js"></script>
    <script src="../../jquery-ui-1.11.2.custom/jquery-ui.js"></script>
    <script src="../../jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
</head>
<body>
    <img id="top" src="../../Images/shaddow_line_top.png" alt=""/>
    <div class="container">
        <h1><a>Product Master</a></h1>
        <form id="productmasterForm">
            <table class="table" id="productmasterTable">
                <tr>
                    <td class="W45">Product Code <input id="productid" type="text"/></td>
                    <td class="W45">Product Name <input id="productname" type="text"/></td>
                    <td class="W10"></td>
                </tr>
                <tr>
                    <td class="W45">Basic Raw Material <input id="basicraw" type="text"/></td>
                    <td class="W45">Group Name <input id="groupname" type="text"/></td>
                    <td class="W10">
                        <div class="btn-group">
                            <button class="btn btn-info btn-sm" id="groupcreate" onclick="group_Create()">C</button>
                            <button class="btn btn-info btn-sm" id="groupedit" onclick="group_Edit()">E</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="W40">Raw Material <input id="rm1" type="text"/></td>
                    <td class="W30">Size <input id="s1" type="text"/></td>
                    <td class="W20">Qty. <input id="q1" type="text"/></td>
                    <td class="W10">
                        <div class="btn-group">
                            <button class="btn btn-info btn-sm" onclick="maprawNsize()">C</button>
                            <button class="btn btn-info btn-sm" onclick="maprawNsize_Edit()">E</button>
                            <button class="btn btn-info btn-sm" id="pma" onclick="add_Row()">A</button>
                        </div>
                    </td>
                </tr>                    
                <tr>
                    <td class="W45">VAT Rate <input id="vat" type="text"/></td>
                    <td class="W45">Unit Of Measure <input id="uom" type="text"/></td>
                    <td class="W10"></td>
                </tr>
                <tr>
                    <td class="W45">Manufacturing Cost <input id="menucost" type="text"/></td>
                    <td class="W45">Sale Rate <input id="salerate" type="text"/></td>
                    <td class="W10"></td>
                </tr>
                <tr>
                    <td class="W45">Maximum Retail Price <input id="mrp" type="text"/></td>
                    <td class="W45">Default Discount <input id="defdisc" type="text"/></td>
                    <td class="W10"></td>
                </tr>
                <tr>
                    <td class="W45">Rate List Date <input id="listdate" type="text"/></td>
                    <td class="W45">Kit Reference <input id="kitref" type="text"/></td>
                    <td class="W10"></td>
                </tr>
            </table>
        </form>
    </div>
    </body>
    </html>

JavaScript 文件 ProductMaster.js

var rowCount = 1;
var rowPosition = 3;
var id = 2;
function add_Row() {
if (rowCount < 11) {
    var table = document.getElementById("productmasterTable");
    var row = table.insertRow(rowPosition);
    rowPosition++;
    for (i = 0; i < 1; i++) {
        var td1 = document.createElement("td");
        td1.innerHTML = 'Raw Material <input id="rm' + id + '" type="text"/>';
        row.appendChild(td1);
        td1.setAttribute("class", "W40");
    }
    for (i = 0; i < 1; i++) {
        var td2 = document.createElement("td");
        td2.innerHTML = 'Size <input id="s' + id + '" type="text"/>';
        row.appendChild(td2);
        td2.setAttribute("class", "W30");
    }
    for (i = 0; i < 1; i++) {
        var td3 = document.createElement("td");
        td3.innerHTML = 'Qty. <input id="q' + id + '" type="text"/>';
        row.appendChild(td3);
        td3.setAttribute("class", "W20");
    }
    id++;
    rowCount++;
}
else {
    alert("Only 10 Allowed");
}
}

JavaScript 文件 RawMaterialGroup.js

function group_Create(){
document.getElementById('rawgroup').style.display = "block";
}

function group_Hide(){
document.getElementById('rawgroup').style.display = "none";
}

function group_Edit(){
alert("I Am Clicked");
}
var rowCount = 5;
var rowPosition = 7;
var id = 2;
function add_rawMaterial() {
if (rowCount < 16) {
    var table = document.getElementById("groupTable");
    var row = table.insertRow(rowPosition);
    rowPosition++;
    for (i = 0; i < 1; i++) {
        var td1 = document.createElement("td");
        td1.innerHTML = 'Raw Material <input id="rmgrm' + id + '" type="text"/>';
        row.appendChild(td1);
        td1.setAttribute("class", "W40");
    }
    for (i = 0; i < 1; i++) {
        var td2 = document.createElement("td");
        td2.innerHTML = 'Qty. <input id="rmgq' + id + '" type="text"/>';
        row.appendChild(td2);
        td2.setAttribute("class", "W20");
    }
    for (i = 0; i < 1; i++) {
        var td3 = document.createElement("td");
        td3.innerHTML = 'UOM <input id="rmguom' + id + '" type="text"/>';
        row.appendChild(td3);
        td3.setAttribute("class", "W20");
    }
    id++;
rowCount++;
}
else {
    alert("Only 15 Allowed");
}
}

CSS 文件 ProductMaster.css

body{
text-align: center;
overflow: hidden;
}
td{
float: left;
text-align: left
}
#rm1,#rm2,#rm3,#rm4,#rm5,#rm6,#rm7,#rm8,#rm9,#rm10{
width: 250px;
height: 30px
}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10{
width: 250px;
height: 30px;
}
#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10{
width: 100px;
height: 30px;
}
.W45{
width: 45%;
}
.W10{
width: 10%;
}
.W15{
width: 15%;
}
.W20{
width: 20%;
}
.W30{
width: 30%;
}
#productid{
width: 100px;
height: 30px;
}
#productname{
width: 300px;
height: 30px;
}
#basicraw{
width: 259px;
height: 30px;
}
#groupname{
width: 315px;
height: 30px;
}
#productmasterForm{
font-size: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#vat{
width: 80px;
height: 30px;
}
#uom{
width: 80px;
height: 30px;
}
#menucost{
width: 80px;
height: 30px;
}
#salerate{
width: 80px;
height: 30px;
}
#mrp{
width: 80px;
height: 30px;
}
#defdisc{
width: 80px;
height: 30px;
}
#listdate{
width: 120px;
height: 30px;
}
#kitref{
width: 100px;
height: 30px;
}

CSS 文件 RawMaterialGroup.css

h2 {
background-color:#00a2e2;
padding:20px 20px;
margin:-10px -10px;
text-align:center;
border-radius:10px 10px 0 0;
border: 1px solid #313131;
}
#rawgroup{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
bottom: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: hidden;
alignment-adjust: central;
}
div#groupPopup{
position: fixed;
left: 18%;
top: 17%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
img#close_group{
position: absolute;
right: -7px;
top: -7px;
cursor: pointer;
}
#groupForm{
max-width: 900px;
min-width: 900px;
padding: 10px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #fff;
margin:-10px -11px;
text-align:center;
border-radius:10px 10px 10px 10px;
}
.W40{
width: 40%;
}
.W20{
width: 20%;
}
.W10{
width: 10%;
}
#rmgrm1,#rmgrm2,#rmgrm3,#rmgrm4,#rmgrm5,#rmgrm6,#rmgrm7,#rmgrm8,#rmgrm9,#rmgrm10,#rmgrm11,#rmgrm12,#rmgrm13,#rmgrm14,#rmgrm15{
width: 215px;
height: 30px;
}
#rmgq1,#rmgq2,#rmgq3,#rmgq4,#rmgq5,#rmgq6,#rmgq7,#rmgq8,#rmgq9,#rmgq10,#rmgq11,#rmgq12,#rmgq13,#rmgq14,#rmgq15{
width: 80px;
height: 30px;
}
#rmguom1,#rmguom2,#rmguom3,#rmguom4,#rmguom5,#rmguom6,#rmguom7,#rmguom8,#rmguom9,#rmguom10,#rmguom11,#rmguom12,#rmguom13,#rmguom14,#rmguom15{
width: 50px;
height: 30px;
}
#rmggn{
width: 200px;
height: 30px;
}
#rmggi{
width: 100px;
height: 30px;
}

最佳答案

您需要添加 type="button" 因为某些浏览器的默认操作是提交

<button type="button" ....>C</button>
<button type="button" ....>E</button>

或者将 ;return false 添加到您的 onclick 事件中，如下所示:

onclick="add_Row(); return false"

不提交页面

更好的方法是在 onload 事件中分配事件处理程序，但如果按钮的点击事件不是 type="button"

，您仍然需要防止默认按钮的点击事件

关于javascript - AddRow 和 Popup 的功能未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31809770/

25 4 0
文章推荐： javascript - 尝试为包含可点击图像的网站构建主页
文章推荐： html - ID 和媒体查询的特异性问题
文章推荐： html - 表单的字体大小会改变表单的大小，即使元素的大小相同
文章推荐： javascript - HTML5 混合模式 - 绘画程序中的图层
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com