Change innerhtml input box values

Question

I have to add new row in html table where it generate text boxes from first row as inner html and shows text of first row as well.

In picture you see last row is same as first row when I press Add Language button. But I want new row should be blank.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

                            // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;


        }

I have put $('.small').val('Some text'); but it text boxes disappeared then.

Please note there are multiple tables at page and we use same function to generate rows.

Could you provide a data-example of what you're trying to achieve? — Jordumus
– Jordumus, Commented Sep 1, 2017 at 11:49

Zorken17 · Accepted Answer · 2017-09-01 13:21:27Z

1

You need to clean the text boxes in order to get them empty. You have marked this with the tag of jQuery, so here is my solution to you question.

function addNewRow(ID) {
  var table = $("#" + ID);
  var cloneRow = $("tr:eq(1)", table).clone();

  //Clean out all textboxes
  $("td input:text", cloneRow).removeAttr('value')

  $("tbody", table).prepend(cloneRow)
}

$('button').click(function() {
  addNewRow("test")
})

table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #cdcdcd;
}

table th,
table td {
  padding: 10px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="test">
  <thead>
    <tr>
      <th>Select</th>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="record">
      </td>
      <td>
        <input type="text" name="record" value="Value 1">
      </td>
      <td>
        <input type="text" name="record" value="Value 2">
      </td>
      <td>
        <input type="text" name="record" value="Value 3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="record">
      </td>
      <td>
        <input type="text" name="record" value="Value 1">
      </td>
      <td>
        <input type="text" name="record" value="Value 2">
      </td>
      <td>
        <input type="text" name="record" value="Value 3">
      </td>
    </tr>
  </tbody>
</table>

<button type="button">Add row!</button>

answered Sep 1, 2017 at 13:21

Zorken17

1,8861 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Muazzam Over a year ago

Please let me know for textarea field to be empty as I have description field

Zorken17 Over a year ago

You can do it like this: $("your ID/Class").val("") and that will empty the textarea. Check this out: jsfiddle.net/e03he32x

Jordumus · Accepted Answer · 2017-09-01 11:56:33Z

0

You can empty the input fields of the first row by using:

$("table tr:first input").val("");

This will:

$("table                     //Select the table
         tr:first            //Pick the first row in that table
                  input      //Take the input fields from that first row
                       ").val("");

answered Sep 1, 2017 at 11:56

Jordumus

2,7832 gold badges25 silver badges39 bronze badges

Collectives™ on Stack Overflow

Change innerhtml input box values

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related