html表格单元格以更好的方式显示在inputbox中输入的文本

Question

I have a dynamic html table , where user fills in certain details. 我有一个动态的html表，用户可以在其中填写某些详细信息。 The problem is , last two input columns data length may be large at times. 问题是，最后两个输入列的数据长度有时可能很大。 Can someone suggest me the best way to show the last two input boxes so that user , after filling the detail , would be able to look at the contents that he has entered with ease. 有人可以建议我显示最后两个输入框的最佳方法，以便用户在填写详细信息之后能够轻松查看他输入的内容。 With the current setup , he wont be able to look at the entire input box data at one glance. 使用当前设置，他将无法一目了然地查看整个输入框数据。

HTML : HTML ：

<table id="master_table" border="0">
     <tr>
     <th>COL1</th>
     <th>COL2</th>
     <th>COL3</th>
     <th>COL4</th>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td>
     <input type="text" name="col1" class="col1"/>
     </td>
         <td>
     <input type="text" name="col2" class="col2"/>
     </td>
         <td>
     <input type="text" name="col3" class="col3"/>
     </td>
         <td>
     <input type="text" name="col4" class="col4"/>
     </td>
         <td>
     <input type="button" name="addRow" class="add" value='Add'/>
     </td>
         <td>
     <input type="button" name="removeRow" class="removeRow" value='Delete'/>
     </td>
     </tr>
     <tr>
     <td colspan="4" align="center">
     <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
     </td>
     </tr>
     </table>

Fiddle demo : 小提琴演示：

FIDDLE PAGE 中间页

Update : Thanks to @ dr Manish Joshi 更新：感谢@ Manish Joshi博士

I am able to achieve the desired result HERE . 我可以在这里达到预期的效果。

But it works fine in jsfiddle , but when i tried run in browser it throws me javascript error. 但是它在jsfiddle中工作正常，但是当我尝试在浏览器中运行时，它抛出了JavaScript错误。

uncaught typeerror cannot read property 'addeventlistener' of null 未捕获的typeerror无法读取null的属性'addeventlistener'

Answer 1

Use table-layout property. 使用table-layout属性。 table-layout:fixed will adjust cells to take up equal space of the table. table-layout:fixed将调整单元格以占据表的相等空间。

Write: 写：

#master_table{
    width:100%;
    table-layout:fixed;
}

Updated fiddle here. 在这里更新了小提琴 。

Answer 2

You can Try 你可以试试

   <td>
 <input type="text" name="col1" class="col1" length="20"/>
 </td>
     <td>
 <input type="text" name="col2" class="col2" length="20"/>
 </td>
     <td>
 <input type="text" name="col3" class="col3" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>
 <input type="text" name="col4" class="col4"  onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>

jsfiddle - http://jsfiddle.net/Vu8HC/6/ jsfiddle- http://jsfiddle.net/Vu8HC/6/

Edited : 编辑：

as per codepen.io/vsync/pen/czgrf , your code will look like for textarea as follows 按照codepen.io/vsync/pen/czgrf，您的代码将类似于textarea，如下所示

<html>
<head>
<style>
body{ background:#c0c0c0; color:#8c001a; }
/*( 'box-sizing' will not work with this code )*/
textarea{  
  /* box-sizing: padding-box; */
  overflow:hidden;
  /* demo only: */
  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  display:block;
  border-radius:10px;
  border:1px solid #8c001a;
}
</style>
</head>

<body>


<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>

<script>
var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);

function autosize(){
var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}
</script>

</body>
</html>

You can see working example in browser on this link : http://ayurvedvishva.com/e_nima/jstest 您可以通过以下链接在浏览器中查看工作示例： http : //ayurvedvishva.com/e_nima/jstest

html表格单元格以更好的方式显示在inputbox中输入的文本

问题描述

2 个解决方案

解决方案1
1 2014-07-05 07:51:36

解决方案2
1 2014-07-05 08:08:53

html表格单元格以更好的方式显示在inputbox中输入的文本

问题描述

2 个解决方案

解决方案1 1 2014-07-05 07:51:36

解决方案2 1 2014-07-05 08:08:53

解决方案1
1 2014-07-05 07:51:36

解决方案2
1 2014-07-05 08:08:53