jquery - 如何在表格中的文本区域右侧对齐按钮?

标签 jquery html css

有一些代码:

     $('.field').live({
            mouseenter:
                function()
                {
                    old_value=$(this).text();
                    item_id=$(this).attr('id');
                    item=$(this).parent('td');
                    //height=item.attr('height');
                    height=event.target.parentNode.offsetHeight;
                    width=event.target.parentNode.offsetWidth;
                    //$(event.target).replaceWith('<textarea id="current-editor"></textarea>');
                    //$("#current-editor").height(height-10);
                    new_value=(old_value=='Not translated') ? '' : old_value;
                    $(this).empty();
                    var field="<textarea style='vertical-align: middle; font-family: Helvetica; font-size: 12pt;' id='new_value' name='term'>" + new_value + "</textarea><div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div>";
                    $(this).html(field);
                    $("#new_value").height(height);
                    $("#new_value").width(width);
                    button_id=item_id.split('/')[0];
                    button_id=button_id.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
                    $("#"+button_id).show();
                },
            mouseleave:
                function()
                {
                    $(this).empty();
                    $(this).html(old_value);
                    $("#"+button_id).hide();
                }
            }
        );

“字段”的代码:

echo "<td width='200' style='vertical-align: middle;'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'>".
strip_tags($record['translate']['coalesce(loc.language_value)'])."</div>";

因此,此代码将表格单元格的文本内容更改为文本区域,并且有效。但是我需要在 textarea 之后添加“保存”按钮,它也可以。按钮在新行中(因为 textarea 必须有 100% 的宽度),但我需要按钮和 textarea 在同一行。请告诉我,我该怎么做?

最佳答案

设置textarea的宽度和float:left给它, 试试这个

var field="<textarea style='vertical-align: middle; float:left; width:250px; font-family: Helvetica; font-size: 12pt;' id='new_value' name='term'>" + new_value + "</textarea><div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div>";

关于jquery - 如何在表格中的文本区域右侧对齐按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11517637/

相关文章:

html - Flexbox 布局在移动 View 中保持重叠的页脚

html - 将行内 block 左对齐

javascript - 如何删除使用 jQuery.bind 创建的事件处理程序?

javascript - 链接衰落的奇怪行为

javascript - 如何将带有视频的 iframe 拉伸(stretch)到其父级?

html - 宽度为 % 的 div 中的 Css sprite?

html - 在 Angular 指令的 HTML 模板的表格单元格的同一行上显示文本和按钮

javascript - 获得偏移然后使位置绝对

php - 使用数组填充动态下拉列表

javascript - 尝试为 jQuery AJAX 请求添加延迟