时间戳

首页 > 解决方案 > 如何在从 javascript 创建的文本框之间制作 1. 空格 2. 将它们与来自 jsp 的另一个文本框对齐

javascript - 如何在从 javascript 创建的文本框之间制作 1. 空格 2. 将它们与来自 jsp 的另一个文本框对齐

问题描述

请帮我解决两个问题： 1. 在从 javascript 创建的每个附加文本框之间留出空间 2. 将（从左到右）从 javascript 创建的文本框与从 jsp 创建的另一个文本框对齐

所以基本上，JSP页面上有一个来自JSP的文本框，当用户点击添加按钮时，Javascript代码每次都会添加额外的文本框。我希望 jsp 中的现有框和 javascript 中的附加文本框在左侧的某个位置对齐，并且在 javascript 中的每个文本框之间有空格。

提前致谢

Javascript和jsp代码如下：

<SCRIPT language="javascript">
    function addRow(tableID) {
         var table = document.getElementById(tableID);


        var rowCount = table.rows.length;

        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);

        var element1 = document.createElement("input");

        element1.type = "checkbox";

        cell1.appendChild(element1); 
        var cell2 = row.insertCell(1);


        var cell3 = row.insertCell(2);

        var element2 = document.createElement("input");

        element2.name = "choiceEntry";
        element2.type = "text";
        element2.size = "100";


        cell3.appendChild(element2);


    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }
 </SCRIPT>
<html>


<form method="post" action="poll_save.jsp">

<TABLE id="dataTable" width="350px" border="0">

    <TR> 

       <!-- <TD> 1 </TD>-->
        <TD><INPUT type="text" class="bigText" value=" 
<%=choice.getChoiceEntry()%>"  size = "100" name="choiceEntry"/> </TD>
        <TD> <INPUT type="checkbox" name="chk"/></TD>
    </TR>

</TABLE>

标签： javascriptjsp

解决方案

我不确定你想要什么，但如果你只想要输入之间的垂直间距和左边距，你会很好的：

form[action="poll_save.jsp"] table input {
  /* Your left offset here */
  margin-left: 125px;
  margin-top: 32px;
}

对于代码，可以通过多种方式添加新输入，其中一种可能是：

const addOne = document.querySelector('#add-one');
const table = document.querySelector('#dataTable tbody');

let i = 0;
addOne.addEventListener('click', () => {
    table.innerHTML += `
    <tr>
        <td>
        <input name="input-${i++}" type="text" />
      </td>
    </tr>
  `;
});

也许您可能想要更灵活的东西？我的意思是让它们与容器的中心对齐？如果是这种情况，请提供您想要使其更清晰的草图。

另外我个人的建议是你将你的样式需要移到 css 中，不要将它们留在标签中（诸如 之类的东西<table width="..." ...>）并且不使用 ID，或者只使用 ID，我建议你添加类，特别是用于样式。

这里有一个工作示例：https ://jsfiddle.net/sigmasoldier/kw8x3b42/2/

请注意，JSP输入不是用 JSP 编写的，但您可以想象它具有 JSP 语法。

推荐阅读