CODEWITHSUNDEEP
javascripthtml
Tyler Cowan
Tyler Cowan

Reputation: 850

Add a blank row in HTML Table

I have an HTML table that adds a new row below where the button in current row is located. Currently when the row is created it generates a clone of the row above including the data. I would like this to be a row that has no entry for the input values rather than a clone of the values above.

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>

Upvotes: 0

Views: 9799

Answers (5)

arjun
arjun

Reputation: 1614

I can suggest you do this - define table rows in javascript and add those directly. Also, use th for table headers

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>

Upvotes: 0

Julio Santa Cruz
Julio Santa Cruz

Reputation: 1

Using JQuery:

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

Upvotes: 0

Matus
Matus

Reputation: 1418

Add this line of code to your function to empty values in HTML code:

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

Upvotes: 0

Dij
Dij

Reputation: 9808

after you add a row, you can just set the values of all inputs in that row to "". get all the inputs of type text using tr.querySelectorAll("input[type='text']") and using a loop set values of all to ""

  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>

Upvotes: 1

Duncan Thacker
Duncan Thacker

Reputation: 5188

You can do this very easily with 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>

Upvotes: 1

Related Questions