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

添加行后，您只需将该行中所有输入的值设置为＆＃34;＆＃34;。使用tr.querySelectorAll("input[type='text']")获取所有类型文本的输入，并使用循环设置值all to＆＃34;＆＃34;

＆＃13;

  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 = "";
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用jQuery轻松完成此任务：

＆＃13;

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 );

＆＃13;

<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>

＆＃13;

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	
  var measured_data = measured.innerHTML;
  var inclination_data = inclination.innerHTML;
  var azimuth_data = azimuth.innerHTML;

  // replace by editable input tags	
  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>

在HTML表

5 个答案: