使用jquery构建动态html，或者它一定比这更容易

Using jquery to build dynamic html, or it must be easier then this

本文关键字：更容易 或者 构建 jquery 动态 html 使用      更新时间：2023-09-26

在浪费了将近一天的时间试图实现以下目标后，我决定冒着可能出现的风险问一个愚蠢的问题。它必须比javascript对我所做的更少痛苦。

在我看来，我想要达到的目标应该很容易。我有一个表单，显示以下内容的行:
  • 月下拉列表
  • 一年下拉菜单
  • 输入文本框

，它将基于表单中前面的select语句的选择动态创建(例如:如果选择了两个，则会显示两行，等等……)但总是至少显示一行，我认为这在for循环中具有默认值。下面是我认为如何构建它的伪代码:

<script type="text/javascript">
var months = array(array of months);
var years = array(2010=>2010,2010=>2011,2010=>2012);
function buildRows() {
    var dropdownValue = 1;
    dropdownValue = $('#show-options').change().val();
    $('#showRows').html('');
    //create amount of rows based upon the value selected in the dropdown list
    for (i = 1; i <= dropdownValue; i++) {
         //create select dropdown populated by the months array declared earlier
         //create select dropdown populated by the years array declared earlier
         //create input textbox
    }
    //return built html
}    
</script>
<form id="sampleForm" method="POST" action="process.php">
    <select id="months" name="months">
    <option selected value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select>
<div id="showRows"></div>
    </form>

我遇到的问题包括没有找到任何方法使用jquery来构建选择下拉菜单，以确保每一行的表单元素将有唯一的标识符后端脚本，将解析它的值为DB插入，或者它将如何"呼应"回屏幕(尝试append, appendTo, add的组合后，我敢肯定更多，我想知道如果我没有'尝试一半的jquery库。

所以，如果有人可以帮助这个饱受打击的后端开发人员，这是他的元素有点，这将是非常感激。请温柔一点;真是漫长的一天。

嗯…我扔了些东西在一起。希望它能给你一些帮助

这是一个较长的版本:快速测试:http://jsfiddle.net/D6nVZ/1/

<!-- Select where user selects how many rows to show -->  
<select id="Select1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<!-- Later will contain the generated rows. I use table since we are createing tabular data/input fields -->
<table id="RowsContainer" border="1">
</table>
在JavaScript: 

//Make sure everything's loaded before running scripts...
window.onload = function(){
    //Your month and year array...
    ArrMonths = ['Jan', 'Feb', 'Mar'];
    ArrYears = [1990, 1991, 1992];        
    //Create pointers to DOM elements that will be used...
    Select1 = $('#Select1');
    RowsContainer = $('#RowsContainer');
    //Attach event handler to the select so that when a user selects, rows will be generated...
    $(Select1).bind('change',GenerateRows);
}

//Function that will do the generation of rows...
function GenerateRows()
{
    //Prepare the number of loops
    var SelectedNumber = 1;
    if($(Select1).val() != '')
    {
        SelectedNumber = parseInt($(Select1).val());
    }
    //Prepare select elements to use
    //Prepare the months' select element
    var MonthSelect = '<select name="Month">';
    for(var i=0; i<ArrMonths.length; i++)
    {
        MonthSelect += '<option value="' + ArrMonths[i] + '">' + ArrMonths[i] + '</option>';
    }
    MonthSelect += '</select>';
   //Prepare the years' select element
    var YearSelect = '<select name="Year">';
    for(var i=0; i<ArrYears.length; i++)
    {
        YearSelect += '<option value="' + ArrYears[i] + '">' + ArrYears[i] + '</option>';
    }
    YearSelect += '</select>';
    //Add rows to the table
    //Clear before filling...
    RowsContainer.html('');
    for(var i=1; i<=SelectedNumber; i++)
    {
        //Create new row here with months' and years' select we have created
        var NewRow = '<tr>' +
                         '<td>' + MonthSelect + '</td>' +
                         '<td>' + YearSelect + '</td>' +
                         '<td><input name="SomeName" type="text" /></td>' +
                     '</tr>';
        //Append each row created to the table (inside the table)
        RowsContainer.append(NewRow);
    }

}

请避免像我在这里所做的那样进行过多的连接，我这样做只是为了使代码更清晰易懂。

相关文章：