个人中心
gpt4 book ai didi

javascript - jQuery Tokeninput 添加多个输入 onClick

转载 作者：行者123 更新时间：2023-11-28 08:20:26 26 4
gpt4 key购买 nike

我正在使用 jquery token 输入和添加-删除文本框 js。如果单独运行它们，一切都会正常工作。但是，当组合它们并添加更多文本框时， token 输入会继续在前一个文本框下方添加一个文本框。

这是我的代码

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script>

<link rel="stylesheet" href="http://loopj.com/jquery-tokeninput/styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css" type="text/css" />


<script type="text/javascript">

var txtbox = '<tr style="width:730px; float:left">\n\
        <td></td>\n\
        <td><input type="text" name="relatetxt[]" class="relatetxt" required/></td><td style="width: 50px; margin-left:20px;">as &nbsp;</td>\n\
        <td><select name="relateID[]">\n\
            <option value="1">1</option>\n\
            <input type="button" onClick="removRow(this)" value="del"/><br /></td></tr>';

function addRow(btn) {
$(btn).closest('tr').append(txtbox);
$(btn).ready(function() {
    $(".relatetxt").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}
    ], {
        hintText: "Producer",
        theme: "facebook",
        searchingText: "Meowing...",
        preventDuplicates: true,
        resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
        tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
    });
});}
function removRow(btn) {
$(btn).closest('tr').remove();}
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".relatetxt").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}], {
        hintText: "Producer",
        theme: "facebook",
        searchingText: "Meowing...",
        preventDuplicates: true,
        resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
        tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
    });
});
</script>

</head>

<body>
<table width="730px">
                    <tr style="width:730px; float:left"><td><label>input: </label></td><td><input type="text" name="relatetxt[]" class="relatetxt"/></td><td style="width: 50px; margin-left:20px;">as &nbsp;</td><td>
                    <select name="relateID[]">
                    <option value="1">1</option>
                </select> <input type="button" onClick="addRow(this)" value="add more"/></td></tr></table>
</body>
</html>

有人知道如何解决这个问题吗？

最佳答案

只需要使用 onClick addrow 添加按钮

<script>
var id = 1;
function addRow(btn) {
 id++;
    var txtbox = '<tr style="width:100%; float:left">\n\
            <td></td>\n\
            <td style="width: 300px;"><input type="text" name="relatetxt[]" class="relate'+ id +'" required/></td><td style="width: 50px; margin-left:20px;">là &nbsp;</td>\n\
            <td style="width: 350px; margin-left:20px;"><select name="relateID[]">\n\
                <?php $rel = get_checkbox("relate","id","ASC","0","10000");
                    foreach ($rel as $lists){
                        echo '<option value="'.$lists->relate_id.'">'.$lists->relate_name.'</option>';
                    } ?></select> \n\
                <input type="button" onClick="removRow(this)" value="Xóa"/><br /></td></tr>';
$(btn).closest('tr').append(txtbox);
$(document).ready(function() {
        $(".relate"+id+"").tokenInput(<?php preget_am("anime") ?>, {
            hintText: "Producer",
            theme: "facebook",
            searchingText: "Meowing...",
            preventDuplicates: true,
            tokenLimit: 1,
            resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
            tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
        });
    });
}
function removRow(btn) {
$(btn).closest('tr').remove();
}
</script>

关于javascript - jQuery Tokeninput 添加多个输入 onClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23040016/

26 4 0
文章推荐： javascript - XMLHttpRequest 文本发送 404 错误
文章推荐： ios - 如何使用 AppCoda 示例和 iOS 图表获取饼图数据以显示？
文章推荐： ios - 如何从非 PHP 应用程序对 WordPress 站点进行心愿单成员身份验证？
文章推荐： javascript - 停止从重叠页脚滚动 div
行者123
个人简介

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

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