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

标签 javascript html css

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

 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>

最佳答案

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>

关于javascript - 如何获取对表格内文本区域的引用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40216205/

上一篇：html - Bootstrap 将元素对齐到按钮的左侧

下一篇：javascript - 防止侧边栏菜单在页脚下方滚动

相关文章：

javascript - 如果所选选项值为空，则隐藏提交按钮

html - 我怎样才能正确地将它变成图像边框？

css - 如何使用 CSS 模拟状态栏消息？

html - CSS 不适用于实时 heroku 网站，但适用于本地主机

javascript - 更改 tumblr.com/js 的帖子数量

javascript - 如何更新 MongoDB 中整个数据库的特定属性？

javascript - 如何在 TITLE 标签上显示 JS 变量？

javascript - 显示选择下拉列表的结果，然后克隆并添加另一个选择

javascript - 动态添加函数作为属性

html - 获取显示 block 的背景颜色以仅填充在文本后面

©2024 IT工具网  联系我们