如何将两个函数合二为一,并根据传递的参数执行

时间:2017-10-17 14:14:22

标签: javascript html

希望使一个按钮根据传入的参数执行两个不同的函数。一个函数根据填写的表单值向表中添加一个新行,其他函数将表单值保存在先前添加的行中。如下图所示,我想添加添加功能            editHtmlTbleSelectedRow()addHtmlTableRow()成为一个函数,并根据传递的参数执行其中一个。

有关如何完成此任务的任何帮助或提示将不胜感激,以下是代码:

HTML

                 <div class="container">
                   <div class="tab tab-1">
                     <table id="table" border="1">
                       <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Age</th>
                       </tr>
                    </table>
                </div>
                <div class="tab tab-2">>
                 Name :<input type="text" name="name" id="name" required><p id="errorName" class="hide">*Name: All letters </p>
                 Email :<input type="email" name="email" id="email" required><p id="errorEmail" class="hide">*Email: blah@blah.com</p>
                 Age :<input type="number" name="age" id="age"  required><p id="errorAge" class="hide">*Age: 3-100 </p>

            <button type="button" id="add" class="btn btn-success">Add New</button>
            <button type="button" id="edit add" class="btn btn-primary">Save</button>
            <button type="button" id="remove" class="btn btn-danger">Remove</button>
             </div>
            </div>

的Javascript

function addHtmlTableRow(){
            // get the table by id
            // create a new row and cells
            // get value from input text
            // set the values into row cell's
            if(checkEmptyInput()){
                resetBorder();
                if(document.getElementById('email').value !== "" && document.getElementById('age').value !== "" && document.getElementById('name').value !== ""){
                var editBtn = document.createElement('button');
                var delBtn = document.createElement('button');
                editBtn.innerHTML = 'Edit';
                editBtn.id = 'editRow';
                delBtn.innerHTML = 'Remove';
                delBtn.id = 'removeRow';
                var newRow = table.insertRow(table.length),
                cell1 = newRow.insertCell(0),
                cell2 = newRow.insertCell(1),
                cell3 = newRow.insertCell(2),
                cell5 = newRow.insertCell(3),
                cell4 = newRow.insertCell(4),
                name = document.getElementById("name").value,
                email = document.getElementById("email").value,
                age = document.getElementById("age").value;
            cell1.innerHTML = name;
            cell2.innerHTML = email;
            cell3.innerHTML = age;
            cell4.appendChild(delBtn);
            cell5.appendChild(editBtn);

        document.getElementById("name").value = '';
        document.getElementById("email").value= '';
        document.getElementById("age").value = '';


            // call the function to set the event to the new row
            selectedRowToInput();
    }        
}          

}


// display selected row data into input text
        function selectedRowToInput()
        {

            for(var i = 1; i < table.rows.length; i++)
            {
                table.rows[i].onclick = function()
                {
                  // get the seected row index
                  rIndex = this.rowIndex;
                  document.getElementById("name").value = this.cells[0].innerHTML;
                  document.getElementById("email").value = this.cells[1].innerHTML;
                  document.getElementById("age").value = this.cells[2].innerHTML;
                };
            }
        }
        selectedRowToInput();

        function editHtmlTbleSelectedRow()
        {   

            var name = document.getElementById("name").value,
                email = document.getElementById("email").value,
                age = document.getElementById("age").value;


                console.log(name, email, age);
           if(checkEmptyInput()){
            table.rows[rIndex].cells[0].innerHTML = name;
            table.rows[rIndex].cells[1].innerHTML = email;
            table.rows[rIndex].cells[2].innerHTML = age;

            document.getElementById("name").value = "";
            document.getElementById("email").value = "";
            document.getElementById("age").value = "";
            console.log(name, email, age);
            resetBorder();  

          }
   document.getElementById('add').addEventListener('click', 
   addHtmlTableRow);
   document.getElementById('edit').addEventListener('click', 
   editHtmlTbleSelectedRow);

谢谢

0 个答案:

没有答案