在HTML表格中添加一個空行

Question

我有一個HTML表格，它在當前行中的按鈕所在的位置添加了一個新行。當前行創建時，它會生成包含數據的上述行的克隆。我希望這是一個沒有輸入值的條目，而不是上面的值的克隆。

的Javascript

function addRow(row) 
 
{ 
 
    var i = row.parentNode.parentNode.rowIndex; 
 
    var tr = document.getElementById('Table').insertRow(i+1); 
 
    tr.innerHTML = row.parentNode.parentNode.innerHTML; 
 
    tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1; 
 
}

<table id="Table" border="1"> 
 
    <tr> 
 
     <td><b>Measured Depth</b></td> 
 
     <td><b>Inclination</b></td> 
 
     <td><b>Azimuth</b></td> 
 
     <td><b>Delete?</b></td> 
 
     <td><b>Add Row?</b></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td> 
 
     <td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td> 
 
     <td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td> 
 
     <td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td> 
 
     <td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td> 
 
    </tr> 
 
</table>

Answer 1

添加一行後，您可以將該行中所有輸入的值設置爲「」。獲得使用文本類型的所有輸入tr.querySelectorAll("input[type='text']")，並使用所有的迴路設定值「」

function addRow(row) 
 
{ 
 
var i = row.parentNode.parentNode.rowIndex; 
 
var tr = document.getElementById('Table').insertRow(i+1); 
 
tr.innerHTML = row.parentNode.parentNode.innerHTML; 
 
var inputs = tr.querySelectorAll("input[type='text']"); 
 
for(var i=0; i<inputs.length; i++) 
 
    inputs[i].value = ""; 
 
}

<table id="Table" border="1"> 
 
     <tr> 
 
      <td><b>Measured Depth</b></td> 
 
      <td><b>Inclination</b></td> 
 
      <td><b>Azimuth</b></td> 
 
      <td><b>Delete?</b></td> 
 
      <td><b>Add Row?</b></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td> 
 
      <td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td> 
 
      <td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td> 
 
      <td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td> 
 
      <td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td> 
 
     </tr> 
 
</table>

Answer 2

您可以用jQuery做到這一點很容易：

var $lastRow = $("table#Table tr:last-child"); 
 
var $newRow = $lastRow.clone() 
 
$newRow.find("input[type=text]").val(''); //empty all the values in text inputs 
 
$("table#Table").append($newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Table" border="1"> 
 
      <tr> 
 
       <td><b>Measured Depth</b></td> 
 
       <td><b>Inclination</b></td> 
 
       <td><b>Azimuth</b></td> 
 
       <td><b>Delete?</b></td> 
 
       <td><b>Add Row?</b></td> 
 
      </tr> 
 
      <tr> 
 
       <td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td> 
 
       <td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td> 
 
       <td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td> 
 
       <td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td> 
 
       <td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td> 
 
      </tr> 
 
</table>

Answer 3

這行代碼到你的功能添加到HTML代碼中的空值：

function addRow(row) 
{ 
    var i = row.parentNode.parentNode.rowIndex; 
    var tr = document.getElementById('Table').insertRow(i+1); 
    tr.innerHTML = row.parentNode.parentNode.innerHTML; 
    tr.innerHTML = tr.innerHTML.replace(/value='.*'/, "value=''"); //this will remove all values from your html 
    tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1; 
} 

Answer 4

使用JQuery：

function addRow(){ 
    var t = $("#Table tr").last().clone(); 
    t.find("input").each(function(i,element) { 
     $(element).val(""); 
    }); 
    t.appendTo("#Table"); 
} 

Answer 5

我可以建議你這樣做 - 在javascript中定義表格行並直接添加。此外，使用th表頭

function edit_row(no) { 
 
    document.getElementById("edit_button" + no).style.display = "none"; 
 
    document.getElementById("save_button" + no).style.display = "block"; 
 

 
    // get elements 
 
    var measured = document.getElementById("measured_row" + no); 
 
    var inclination = document.getElementById("inclination_row" + no); 
 
    var azimuth = document.getElementById("azimuth_row" + no); 
 

 
    // get their values \t 
 
    var measured_data = measured.innerHTML; 
 
    var inclination_data = inclination.innerHTML; 
 
    var azimuth_data = azimuth.innerHTML; 
 

 
    // replace by editable input tags \t 
 
    measured.innerHTML = "<input type='text' id='measured_text" + no + "' value='" + measured_data + "'>"; 
 
    inclination.innerHTML = "<input type='text' id='inclination_text" + no + "' value='" + inclination_data + "'>"; 
 
    azimuth.innerHTML = "<input type='text' id='azimuth_text" + no + "' value='" + azimuth_data + "'>"; 
 
} 
 

 
function save_row(no) { 
 
    // same as in edit function 
 
    var measured_val = document.getElementById("measured_text" + no).value; 
 
    var inclination_val = document.getElementById("inclination_text" + no).value; 
 
    var azimuth_val = document.getElementById("azimuth_text" + no).value; 
 

 
    document.getElementById("measured_row" + no).innerHTML = measured_val; 
 
    document.getElementById("inclination_row" + no).innerHTML = inclination_val; 
 
    document.getElementById("azimuth_row" + no).innerHTML = azimuth_val; 
 

 
    document.getElementById("edit_button" + no).style.display = "block"; 
 
    document.getElementById("save_button" + no).style.display = "none"; 
 
} 
 

 
function delete_row(no) { 
 
    document.getElementById("row" + no + "").outerHTML = ""; 
 
} 
 

 
function add_row() { 
 

 
    var new_measured = document.getElementById("new_measured").value; 
 
    var new_inclination = document.getElementById("new_inclination").value; 
 
    var new_azimuth = document.getElementById("new_azimuth").value; 
 

 
    var table = document.getElementById("data_table"); 
 
    var table_len = (table.rows.length) - 1; 
 
    var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='measured_row" + table_len + "'>" + new_measured + "</td><td id='inclination_row" + table_len + "'>" + new_inclination + "</td><td id='azimuth_row" + table_len + "'>" + new_azimuth + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>"; 
 

 
    document.getElementById("new_measured").value = ""; 
 
    document.getElementById("new_inclination").value = ""; 
 
    document.getElementById("new_azimuth").value = ""; 
 
}

<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> 
 
    <tr> 
 
    <th>Measured Depth</th> 
 
    <th>Inclination</th> 
 
    <th>Azimuth</th> 
 
    </tr> 
 

 
    <tr id="row1"> 
 
    <td id="measured_row1">339</td> 
 
    <td id="inclination_row1">0.540000021</td> 
 
    <td id="azimuth_row1">310.7200012</td> 
 
    <td> 
 
     <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')"> 
 
     <input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')"> 
 
     <input type="button" value="Delete" class="delete" onclick="delete_row('1')"> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td><input type="text" id="new_measured"></td> 
 
    <td><input type="text" id="new_inclination"></td> 
 
    <td><input type="text" id="new_azimuth"></td> 
 
    <td><input type="button" class="add" onclick="add_row();" value="Add Row"></td> 
 
    </tr> 
 

 
</table>