希望使一个按钮根据传入的参数执行两个不同的函数。一个函数根据填写的表单值向表中添加一个新行,其他函数将表单值保存在先前添加的行中。如下图所示,我想添加添加功能
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);
谢谢