个人中心
gpt4 book ai didi

javascript - 使用 jquery 创建两列(列表)文本框

转载 作者：行者123 更新时间：2023-12-02 17:08:31 24 4
gpt4 key购买 nike

我正在尝试创建两列文本框，其应如下图所示:

enter image description here

但它看起来像这样:

enter image description here

我使用了以下代码:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DHTML with jQuery</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <button id="btnStart">start</button>
    <div id="container"></div>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="../js/script.js"></script>
</body>
</html>

来自 DOM 检查器的 HTML

<html><head>
    <script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>

</head>
<body>
    <button id="btnStart" style="display: none;">start</button>
    <div id="container">
    <input type="text" id="txtPlayerId1" placeholder="player 1">
    <input type="text" id="txtPlayerId11" placeholder="0">
    <input type="text" id="txtPlayerId2" placeholder="player 2">
    <input type="text" id="txtPlayerId12" placeholder="0">
    <input type="text" id="txtPlayerId3" placeholder="player 3">
    <input type="text" id="txtPlayerId13" placeholder="0">
    <input type="text" id="txtPlayerId4" placeholder="player 4">
    <input type="text" id="txtPlayerId14" placeholder="0">
    <input type="text" id="txtPlayerId5" placeholder="player 5">
    <input type="text" id="txtPlayerId15" placeholder="0">
    <input type="text" id="txtPlayerId6" placeholder="player 6">
    <input type="text" id="txtPlayerId16" placeholder="0">
    <input type="text" id="txtPlayerId7" placeholder="player 7">
    <input type="text" id="txtPlayerId17" placeholder="0">
    <input type="text" id="txtPlayerId8" placeholder="player 8">
    <input type="text" id="txtPlayerId18" placeholder="0">
    <input type="text" id="txtPlayerId9" placeholder="player 9">
    <input type="text" id="txtPlayerId19" placeholder="0">
    <input type="text" id="txtPlayerId10" placeholder="player 10">
    <input type="text" id="txtPlayerId110" placeholder="0">
    <input type="text" id="txtPlayerId11" placeholder="player 11">
    <input type="text" id="txtPlayerId111" placeholder="0"></div>

    <script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
    <link rel="stylesheet" href="/iScorecard/resources/css/style.css">

</body></html>

JS

    function createTextBoxes(event, txtBoxCount) {
    var iCounter = 0,
        playerText = null,
        scoreText = null;

    for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
        playerText = document.createElement('input');
        scoreText = document.createElement('input');
        $(playerText).attr('type', 'text');
        $(scoreText).attr('type', 'text');
        $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
        $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
        $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
        $(scoreText).attr('placeholder', '0');
        $('#container').append(playerText);
        $('#container').append(scoreText);
    }
}

$("#btnStart").on('click', function(event) {
    createTextBoxes(event, 11);
    $("#btnStart").hide();
});

我应该如何修改代码来创建模型屏幕中所示的文本框列表。

最佳答案

您可以使用 css 来完成此操作。我可以给你3个选择。

选项 1 - 仅使用 CSS(带有内联 block )

<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

上面的 css 将使所有输入 type=text 元素作为内联 block ，并将输入宽度设为父容器的 40%。即使你改变了主容器的宽度。内部元素不会影响。它总是显示为两列

选项 2 - 仅使用 CSS(带 float )

<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
} 
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>

在 HTML 中，我为容器 DIV 添加额外的类

<div id="container" class="clearfix">

此选项使用 float 而不是内联 block 。在这里，我添加了一个额外的类 .clearfix ，每当我们执行 float 时，我们都需要在 float 元素之后清除它。否则它也会影响以下元素

选项3 - 将特定类别添加到玩家输入框和分数输入框

<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
  var iCounter = 0,
  playerText = null,
  scoreText = null;

  for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
    playerText = document.createElement('input');
    scoreText = document.createElement('input');
    $(playerText).attr('type', 'text');
    $(scoreText).attr('type', 'text');
    $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
    $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
    $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
    $(scoreText).attr('placeholder', '0');

    $(playerText).attr('class', 'player');
    $(scoreText).attr('class', 'score');

    $('#container').append(playerText);
    $('#container').append(scoreText);
  }
}
</script>

关于javascript - 使用 jquery 创建两列(列表)文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25027311/

24 4 0
文章推荐： javascript - 如何使用 PhantomJS 抓取嵌入的 JSON
文章推荐： javascript - 单击链接创建新表单
文章推荐： javascript - 检测元素是否插入并根据元素运行函数
文章推荐： javascript - ExtJS 4 远程排序为日期
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com