Question

我试图在表格单元格中放置TextBox和文本，但每次将TextBox宽度设置为100％时，都会脱离线条。现在我将TextBox和文本放在不同的单元格上，但是如果我能让它们停留在同一个单元格上而文本不会脱离线条会很棒。文本长度可能会有所不同，因此我无法将TextBox宽度设置为特定的％。

*当前样本：| TextBox |示例文本|

*所需样本：| TextBox示例文本|

*使用我当前的代码示例，TextBox和文本在一个表格单元格中

|文本框

示例文字|

目前我正在使用这个来调整TextBox的大小以适应表td：

var tbls1 = [
    'tbl-nutritional-histo',
];

for (var tt = 0; tt &lt; tbls1.length; tt++) {
    var tbl1 = document.getElementById(tbls1[tt]).getElementsByTagName('input');                        

    // Loop inside elements of current table
    for (var ii = 0 ; ii < tbl1.length; ii++) {
        // Check if current element is textbox
        if (tbl1[ii].type == "text") {
            // Set textbox size to 100%
            tbl1[ii].style.width = '100%';  
        }
    }   
}

Answer 1

＆＃39; 100％＆＃39;仅在设置或继承元素的父元素大小时才起作用。您可以在调试工具中浏览网页，例如firefox中的fire bug或Chrome中的开发工具，以查看相关元素的css设置。

Answer 2

这就是我提出的，冗长但解决了我的问题。我会对我的代码进行修改。

参考文献：Getting pure text Get offsetWidth

<html>
<head>
    <style type="text/css">
        input[type="text"]  {
            width: 100%;
        }

        table td {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="tbl-test">
        <tr>
            <td><input type="text">Hello World</td>
            <td>Plain Text<input type="text"></td>
        </tr>
    </table>

    <script type="text/javascript">
        var tbl = ['tbl-test'];

        // Loop thru tbl list
        for (var i=0; i <tbl.length;i++) {
            var tblElements = document.getElementById(tbl[i])
            var tblRowCount = tblElements.rows.length

            // Loop thru table rows
            for (var rows=0; rows<tblRowCount; rows++) {
                var colCount = tblElements.rows[rows].cells.length

                // Loop thru table row columns
                for (var ii=0; ii<colCount;ii++) {
                    var el = tblElements.rows[rows].cells[ii]
                    var inputEl = tblElements.rows[rows].cells[ii].getElementsByTagName('input');

                    var text = el.innerText || el.textContent;

                    // Loop thru elements with tags input
                    for (var t=0; t<inputEl.length;t++) {
                        if (inputEl[t].type == 'text') {
                            // Get td size - length of text
                            inputEl[t].style.width = el.offsetWidth-(text.length) + "px";
                        }   
                    }

                }   
            }

        }
    </script>
</body>

如何使表格单元格中的文本框和文本适合？

2 个答案: