Блог

Главная - Вопросы по программированию - 2 поля имя и адрес электронной почты добавляйте и удаляйте их без jquery

2 поля имя и адрес электронной почты добавляйте и удаляйте их без jquery

#javascript

Вопрос:

У меня есть этот код, который я написал, мне нужна была помощь в удалении таблиц из этого кода, но все еще нужны запрограммированные значения для имени и электронной почты. Взгляните на эту ссылку https://xd.adobe.com/view/672cfd6c-b97b-4810-878a-0d1f9f9e78f8-327f/ может кто-нибудь показать мне, как сделать этот код без таблиц, но у меня все еще есть запрограммированные значения для имени и электронной почты, и я не могу использовать Jquery.

 <html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task</title>
</head>
<body onload="createTable()">

<div id="cont"></div>
<!--the container to add the table.-->
<script>
 var counter = 0;
        var arrHead = new Array();
        arrHead = ['Name', 'Email-Id']; // table headers.
        // first create a TABLE structure by adding few headers.
        function createTable() {
            var empTable = document.createElement('table');
            empTable.setAttribute('id', 'Table'); // table id.
            var tr = empTable.insertRow(-1);
            for (var h = 0; h < arrHead.length; h  ) {
                var th = document.createElement('th'); // the header object.
                th.innerHTML = arrHead[h];
                tr.appendChild(th);
            }
            var div = document.getElementById('cont');
            div.appendChild(empTable); // add table to a container.
        }
        //function to remove row
        function removeRow() {
            var Tab = document.getElementById('Table');
            Tab.deleteRow(Tab.rows.length - 1);
        }
        // function to add new row.
        function addRow() {
            var Tab = document.getElementById('Table');
            list = [
                { "UserName": "Humzah", "EmailAddress": "humzah@xyzcom" },
                { "UserName": "Akshay ", "EmailAddress": "Akshay@xyzcom" },
                { "UserName": "Steve", "EmailAddress": "Steve@xyzcom" },
            ];
            var rowCnt = Tab.rows.length; // get the number of rows.
            var tr = Tab.insertRow(rowCnt); // table row.
            tr = Tab.insertRow(rowCnt);
            var td1 = document.createElement('td');
            td1 = Tab.insertRow().insertCell();
            var ele1 = document.createElement('input');
            ele1.setAttribute('type', 'text');
            ele1.setAttribute('id', 'name1');
            td1.appendChild(ele1);
            var td2 = document.createElement('td');
            td2 = Tab.insertRow().insertCell();
            var ele2 = document.createElement('input');
            ele2.setAttribute('type', 'text');
            ele2.setAttribute('id', 'name2' );
            ele1.value = list[counter].UserName;
            ele2.value = list[counter].EmailAddress;
            td2.appendChild(ele2);
            counter  ;
        }

        function submit() {
            var currentId = document.getElementById("email1").value;
            var mailformat = /^[a-zA-Z0-9.!#$%amp;'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:.[a-zA-Z0-9-] )*$/;
            if (currentId === '') {
                alert("Enter Email Address");
                return false;
            }
            if (currentId.match(mailformat)) {
                alert("Successfully added");
                return true;
            }
            else {
                alert("You have entered an invalid email address!");
                return false;
            }
            console.log(arrValues);
        }
    </script>
<p>
    <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    <button id="removeRow" value="Remove Row" onclick="removeRow()">Remove</button>
    <input type="button" id="bt" value="Submit Data" onclick="submit()" />
</p>
</body>
</html>
Метки: