user107982 user107982 - 1 month ago 17
CSS Question

How to get reference to the textarea inside the table?

How to get get reference to the textarea inside the table? I want to be able to change the height of the all the cells when the height of one textarea changes.I have my code which automatically adjust the height of a particular textarea inside the cell on typing.Pls help me out



function addRow(tableId) {
var x=document.getElementById(tableId);
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('textarea')[0];
inp2.id += len;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('textarea')[0];
inp3.id += len;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('textarea')[0];
inp4.id += len;
inp4.value = '';
var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
inp5.id += len;
inp5.value = 'X';
x.appendChild( new_row );
}

function deleteRow(r) {
var x = document.getElementById('monographTable');
if(x.rows.length == 2) {
addRow('monographTable');
}
var i = r.parentNode.parentNode.rowIndex;
x.deleteRow(i);
setSNO();
}

function setSNO() {
var myTable = document.getElementById('monographTable');
var row_count = myTable.rows.length;
for(var i = 1; i <= row_count; i++) {
myTable.rows[i].cells[0].innerHTML = i;
}
}
function textAreaAdjust(o){
o.style.height="1px";
o.style.height=(20+o.scrollHeight)+"px";
}

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
input {
border : hidden;
display:inline-block;
height: 20px;
line-height: 20px;
padding: 3px;
}
</style>
</head>
<body>
<form name = "monograph" >
<center> <h2> Emp ID : </h2> </center>
<hr size = "3px" color = "black" />
<br />
<table id = "monographTable">
<title>Monographs</title>
<col width="100">
<col width="200">
<col width="200">
<col width="200">
<col width="130">
<tr>
<th >s.no</th>
<th >Title</th>
<th >Coauthors Name</th>
<th >Publisher Name</th>
<th >Year</th>
</tr>
<tr>
<td>1</td>
<td><textarea id = "title" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea></td>
<td><textarea id = "co_authors" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden; border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" ></textarea></td>
<td> <textarea id = "publisher" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden; border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea></td>
<td> <textarea id = "year" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden; border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea> </td>
<td> <input type = "button" value = "X" onclick = "deleteRow(this)" style = "height : 25px; width : 25px; border-radius : 5px" /> </td>
</tr>
</table>
<input type = "button" value = "+" onclick = "addRow('monographTable')" style = "height : 25px; width : 25px; border-radius : 5px" />
</form>
</body>
</html>




Answer

Set height: 100%; for textarea elements

function addRow(tableId) {
  var x = document.getElementById(tableId);
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('textarea')[0];
  inp2.id += len;
  inp2.value = '';
  var inp3 = new_row.cells[3].getElementsByTagName('textarea')[0];
  inp3.id += len;
  inp3.value = '';
  var inp4 = new_row.cells[4].getElementsByTagName('textarea')[0];
  inp4.id += len;
  inp4.value = '';
  var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
  inp5.id += len;
  inp5.value = 'X';
  x.appendChild(new_row);
}

function deleteRow(r) {
  var x = document.getElementById('monographTable');
  if (x.rows.length == 2) {
    addRow('monographTable');
  }
  var i = r.parentNode.parentNode.rowIndex;
  x.deleteRow(i);
  setSNO();
}

function setSNO() {
  var myTable = document.getElementById('monographTable');
  var row_count = myTable.rows.length;
  for (var i = 1; i <= row_count; i++) {
    myTable.rows[i].cells[0].innerHTML = i;
  }
}

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (20 + o.scrollHeight) + "px";
}
table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
}
input {
  border: hidden;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}
textarea {
  height: 100%;
}
<form name="monograph">
  <center>
    <h2> Emp ID : </h2> 
  </center>
  <hr size="3px" color="black" />
  <br />
  <table id="monographTable">
    <title>Monographs</title>
    <col width="100">
      <col width="200">
        <col width="200">
          <col width="200">
            <col width="130">
              <tr>
                <th>s.no</th>
                <th>Title</th>
                <th>Coauthors Name</th>
                <th>Publisher Name</th>
                <th>Year</th>
              </tr>
              <tr>
                <td>1</td>
                <td>
                  <textarea id="title" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden;  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea>
                </td>
                <td>
                  <textarea id="co_authors" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden; border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea>
                </td>
                <td>
                  <textarea id="publisher" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden;  border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea>
                </td>
                <td>
                  <textarea id="year" onkeydown="textAreaAdjust(this)" style="outline:none; overflow: hidden;  border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"></textarea>
                </td>
                <td>
                  <input type="button" value="X" onclick="deleteRow(this)" style="height : 25px; width : 25px; border-radius : 5px" />
                </td>
              </tr>
  </table>
  <input type="button" value="+" onclick="addRow('monographTable')" style="height : 25px; width : 25px; border-radius : 5px" />
</form>

Comments