從引導模式編輯表格行

在這個項目中，我需要編輯表格功能。單擊編輯按鈕時將出現模式。該模式將包含一個表格，該表格必須用選定行中的當前表格數據填充，當點擊保存按鈕時，當前數據將被覆蓋。每個新行在添加到表格後都會有其行ID和編輯按鈕。從引導模式編輯表格行

下面是摘錄：

function add_row() { 
 
    var code = document.getElementById('code').value; 
 
    if (code == "") { 
 
    alert("code empty!"); 
 
    return false; 
 
    } else if (isNaN(code)) { 
 
    alert("code must be numbers"); 
 
    return false; 
 
    } 
 

 
    var name = document.getElementById('name').value; 
 
    if (name == "") { 
 
    alert("name empty!"); 
 
    return false; 
 
    } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) { 
 
    alert("name must be letters"); 
 
    return false; 
 
    } 
 

 
    var year = document.getElementById('year').value; 
 
    if (year == "") { 
 
    alert("year empty!"); 
 
    return false; 
 
    } else if (isNaN(year)) { 
 
    alert("year must number"); 
 
    return false; 
 
    } 
 

 
    var major = document.getElementById('major').value; 
 
    if (major == "") { 
 
    alert("major empty!"); 
 
    return false; 
 
    } 
 

 
    var address = document.getElementById('address').value; 
 
    if (address == "") { 
 
    alert("address empty!"); 
 
    return false; 
 
    } 
 

 
    var email = document.getElementById('email').value; 
 
    var et = email.indexOf("@"); 
 
    var dot = email.indexOf("."); 
 
    if (email == "") { 
 
    alert("email empty!"); 
 
    return false; 
 
    } else if (et < 1 || dot < et + 2 || dot + 2 > email.length) { 
 
    alert('email must has @ and domain'); 
 
    return false; 
 
    console.log('failures'); 
 
    } 
 

 
    var phone = document.getElementById('phone').value; 
 
    if (phone == "") { 
 
    alert("phone empty!"); 
 
    return false; 
 
    } else if (isNaN(phone)) { 
 
    alert("phone must number"); 
 
    return false; 
 
    } 
 

 
    var table = document.getElementsByTagName('table')[0]; 
 
    //var newRow = table.insertRow(table.rows.length/2 + 1); 
 

 
    var table = document.getElementById("data_table"); 
 
    var table_len = (table.rows.length/ 2+1) - 1; 
 
    var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='code_row" + table_len + "'>" + code + "</td><td id='name_row" + table_len + "'>" + name + "</td><td id='year_row" + table_len + "'>" + year + "</td><td id='major_row" + table_len + "'>" + major + "</td><td id='address_row" + table_len + "'>" + address + "</td><td id='email_row" + table_len + "'>" + email + "</td><td id='phone_row" + table_len + "'>" + phone + "</td> <td><input type='button' id='edit_button" + table_len + "' value='Edit' onclick='edit_row(" + table_len + ")' data-toggle='modal' data-target='#myModal2'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>"; 
 

 
} 
 

 
function edit_row(no) { 
 
    var code = document.getElementById("code_row" + no); 
 
    var name = document.getElementById("name_row" + no); 
 
    var year = document.getElementById("year_row" + no); 
 
    var major = document.getElementById("major_row" + no); 
 
    var address = document.getElementById("address_row" + no); 
 
    var email = document.getElementById("email_row" + no); 
 
    var phone = document.getElementById("phone_row" + no); 
 

 
    code.value = document.getElementById("code_row" + no); 
 
    name.value = document.getElementById("code_row" + no); 
 
    year.value = document.getElementById("code_row" + no); 
 
    major.value = document.getElementById("code_row" + no); 
 
    address.value = document.getElementById("code_row" + no); 
 
    email.value = document.getElementById("code_row" + no); 
 
    phone.value = document.getElementById("code_row" + no); 
 

 
    var code_data = name.innerHTML; 
 
    var name_data = name.innerHTML; 
 
    var year_data = year.innerHTML; 
 
    var major_data = major.innerHTML; 
 
    var address_data = address.innerHTML; 
 
    var email_data = email.innerHTML; 
 
    var phone_data = phone.innerHTML; 
 

 
} 
 

 
function save_row(no) { 
 
    var code = document.getElementById('code').value; 
 
    if (code == "") { 
 
    alert("code empty!"); 
 
    return false; 
 
    } else if (isNaN(code)) { 
 
    alert("code must number"); 
 
    return false; 
 
    } 
 

 
    var name = document.getElementById('name').value; 
 
    if (name == "") { 
 
    alert("name empty!"); 
 
    return false; 
 
    } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) { 
 
    alert("name must letters"); 
 
    return false; 
 
    } 
 

 
    var year = document.getElementById('year').value; 
 
    if (year == "") { 
 
    alert("year empty!"); 
 
    return false; 
 
    } else if (isNaN(year)) { 
 
    alert("year must number"); 
 
    return false; 
 
    } 
 

 
    var major = document.getElementById('major').value; 
 
    if (major == "") { 
 
    alert("major empty!"); 
 
    return false; 
 
    } 
 

 
    var address = document.getElementById('address').value; 
 
    if (address == "") { 
 
    alert("address empty!"); 
 
    return false; 
 
    } 
 

 
    var email = document.getElementById('email').value; 
 
    var et = email.indexOf("@"); 
 
    var dot = email.indexOf("."); 
 
    if (email == "") { 
 
    alert("email empty!"); 
 
    return false; 
 
    } else if (et < 1 || dot < et + 2 || dot + 2 > email.length) { 
 
    alert('email must contains @ and domain'); 
 
    return false; 
 

 
    } 
 

 
    var phone = document.getElementById('phone').value; 
 
    if (phone == "") { 
 
    alert("phone empty!"); 
 
    return false; 
 
    } else if (isNaN(phone)) { 
 
    alert("phone must number"); 
 
    return false; 
 
    } 
 

 
    var code_val = document.getElementById("code_row" + no).value; 
 
    var name_val = document.getElementById("name_row" + no).value; 
 
    var year_val = document.getElementById("year_row" + no).value; 
 
    var major_val = document.getElementById("major_row" + no).value; 
 
    var address_val = document.getElementById("address_row" + no).value; 
 
    var email_val = document.getElementById("email_row" + no).value; 
 
    var phone_val = document.getElementById("phone_row" + no).value; 
 

 
    document.getElementById("code_row" + no).innerHTML = code_val; 
 
    document.getElementById("name_row" + no).innerHTML = name_val; 
 
    document.getElementById("year_row" + no).innerHTML = year_val; 
 
    document.getElementById("major_row" + no).innerHTML = major_val; 
 
    document.getElementById("address_row" + no).innerHTML = address_val; 
 
    document.getElementById("email_row" + no).innerHTML = email_val; 
 
    document.getElementById("phone_row" + no).innerHTML = phone_val; 
 
} 
 

 
function reset_form() 
 
{ 
 
    document.getElementById("myForm").reset(); 
 
}

<div class="modal fade" id="myModal2" role="dialog"> 
 
    <div class="modal-dialog modal-sm"> 
 

 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Edit Data</h4> 
 
     </div> 
 

 
     <!--Body pop up--> 
 
     <div class="modal-body"> 
 

 
     <form id="myForm"> 
 
      Code : 
 
      <br> 
 
      <input type="text" placeholder="code" name="code" id="code"> 
 

 
      <br>name : 
 
      <br> 
 
      <input type="text" placeholder="name" name="name" id="name"> 
 

 
      <br>year : 
 
      <br> 
 
      <input type="text" placeholder="year" name="year" id="year"> 
 

 
      <br>major : 
 
      <br> 
 
      <!--<input type="text" placeholder="major" name="major" id="major">--> 
 
      <form action="/action_page.php" name="major" id="major"> 
 
      <select name="major" id="major"> 
 
        <option value="Akuntansi">Akuntansi</option> 
 
        <option value="Teknik Infomatika">Teknik Informatika</option> 
 
        <option value="Psikologi">Psikologi</option> 
 
        <option value="Hukum">Hukum</option> 
 
        <option value="Politik">Politik</option> 
 
        </select> 
 
      </form> 
 

 
      address : 
 
      <br> 
 
      <!--<input type="text" placeholder="address" name="address" id="address">--> 
 
      <textarea class="form-control" rows="1" placeholder="address" name="address" id="address"></textarea> 
 

 
      <br>Email : 
 
      <br> 
 
      <input type="email" id="email" name="email" placeholder="email"> 
 

 
      <br>phone : 
 
      <br> 
 
      <input type="text" placeholder="phone" name="phone" id="phone"> 
 
     </form> 
 

 
     </div> 
 

 
     <div class="modal-footer"> 
 

 
     <button type="button" onClick="reset_form()" id="btnCancel" style="background-color:#800003" class="btn btn-default">Reset</button> 
 
     <button type="button" onClick="save_row()" id="btnSave" style="background-color:#003300" class="btn btn-default">Save</button> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-12 Wira Xie

你的問題是什麼？你是否孤立了一個問題，解決不了問題？ – Niloct

當編輯按鈕被點擊時，我想用當前表格數據填充編輯表單，並在點擊保存按鈕時覆蓋它，所以我認爲問題是edit_row和save_row函數是怎麼樣的？預先感謝您 –

那麼，您是在要求某人爲您製作此功能？ – nosthertus

，使乾淨的代碼，現在比與驗證打擾它更重要的是，你必須與你的驗證規則非常逼真，也可以非常適得其反你容易。

您的代碼一些進一步的建議：

你仍然缺少<TABLE>元素對你的問題的HTML片段
你仍然對文檔中的JavaScript兩條表DOM引用，第一個表（即document.getElementsByTagName('table')[0]）以及編號爲data_table的表格。你只在後面插入行。
insertRow()不需要參數將新行添加到表的末尾，這是默認行爲（請參閱here）。

此外，您還可以重構驗證代碼的功能，說validate_error_message()。它應該返回驗證的錯誤消息，或者返回一個空白字符串。它的開始是，例如，移植：

var code = document.getElementById('code').value; 
if (code == "") { 
    alert("code empty!"); 
    return false; 
} else if (isNaN(code)) { 
    alert("code must be numbers"); 
    return false; 
}

到

現在

function validate_error_message() { 
    var code = document.getElementById('code').value; 
    if (code == "") { 
     return "code empty!"; 
    } else if (isNaN(code)) { 
     return "code must be numbers"; 
    } 
    /* ... more validations */ 
    return ""; 
}

，在add_row()和save_row()，刪除所有的驗證，並與包即add_row()裏面的代碼：

function add_row() { 
    var err_msg = validate_error_message(); 
    if (err_msg == "") { 
     /* add_row() body */ 
    } 
    else { 
     alert(err_msg); 
    } 
}

來源

2017-10-12 17:35:19 Niloct

從引導模式編輯表格行

回答

相關問題