javascript - 如何在具有一定约束的html中动态创建表格?

标签 javascript html dynamically-generated

我想接受用户(数字)的输入并显示图像与数字一样多的次数。如果用户输入5,则图像应彼此相邻显示5次,并在图像下方显示相应的数字-低于第一张图像'1 ' 第二张图片“2”。基本上将此表放入循环中。

<HTML>
<BODY>


<TABLE>
<TR>
<TD>
<IMG SRC="C:/Users/User/Desktop/RE/G.JPG">
</TD>
</TR>
<TR><TD ALIGN="CENTER">1</TD>
</TABLE>"


</BODY>
</HTML>

最佳答案

您可以使用 jQuery 来完成此任务,并编写一个函数来生成具有动态值的 HTML:

完整的解决方案

<HTML>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        function generateTable(number) {
            return "<table><tr><td>" + 
                   "<img src='C:/Users/User/Desktop/RE/G.JPG'></td></tr><tr><td align='center'>" +
                   number +
                   "</td></table>";
        }

        $(function(){
            var userInput = 3;

            for (var i = 0; i < userInput; i++) {
                $('#dynamic').append(generateTable(i + 1)); 
            }
        });
    </script>
</head>
<body>
    <div id='dynamic'></div>
</body>
</html>

关于javascript - 如何在具有一定约束的html中动态创建表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29534725/

相关文章:

javascript - Angularjs 表单验证指令失败

javascript - d3 中带有 Contenteditable 的 ForeignObject 不适用于 chrome

c - 通过引用传递时动态调整结构数组大小

javascript - 将 DIV 动态 append 到 CodeMirror(不替换初始代码)

javascript - 在 Angular 2 中鼠标悬停之前,组件变量更改不会在 View 中更新

javascript - 如何在 Ember 中以 POST 请求发送文件?现在只发送文件名

javascript - meteor 检测集合中字段的存在

html - 如何让这些 div 正确显示在标题上?

javascript - 如何用 JavaScript 替换 Html `table` 中的第一个 `th` Html 标签 `td` Html 标签

java - 在 AsyncTask onPostExecute 中动态添加一个按钮