文本区域的

文本区域的

关注
发信
关注(28)粉丝(399)

javascript - 如何获取表内文本区域的引用？

如何获得对表内文本区域的引用？我希望能够在一个文本区域的高度更改时更改所有单元格的高度。我有自己的代码，可以在键入时自动调整单元格内特定文本区域的高度。请帮我



 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>

最佳答案

为height: 100%;元素设置textarea




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>

07-24 18:03
Powered by LMLPHP ©2024 文本区域的 0.040529