在 jQuery 中使用 form 将值插入到表中
inserting values to a table using form in jquery
表中
仅插入第一个给定值。变量 i 用于递增表中 tr 的索引值,它正在递增,但值未插入。其他的不会添加。想不通为什么。我是jquery的新手。
<!DOCTYPE html>
<html>
<head>
<title>My first Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var i=0;
$(document).ready(function(){
$("#hello").click(function(){
var a=$("<td></td>").text($("#test1").val());
var b=$("<td></td>").text($("#test2").val());
var c=$("<td></td>").text($("#test3").val());
var d=$("<td></td>").text($("#test4").val());
var e=$("<td></td>").text($("#test5").val());
$($("table tr").eq(i)).after(e).after(d).after(c).after(b).after(a);
i=i+1;
});
});
</script>
</head>
<body>
<div>
<h1>Hello Talib</h1>
<div>IT</div>
<div>WILL</div>
<div>DISAPPEAR</div>
</div>
First Name: <input type="text" value="fname" id ="test1"><br>
Last Name: <input type="text" value="lname" id="test2"><br>
Roll Number: <input type="text" value="rnum" id="test3"><br>
Faculty:
<select name="Faculty" id="test4">
<option value="CE">Computer Engineering</option>
<option value="BE">Biomedical Engineering</option>
<option value="CV">Civil Engineering</option>
<option value="TE">Telecommunication Engineering</option>
</select>
<br>
Semester:
<input type="radio" value="1st" name="sem" id="test5">1st
<input type="radio" value="2nd" name="sem" id="test5">2nd
<input type="radio" value="3rd" name="sem" id="test5">3rd
<input type="radio" value="4th" name="sem" id="test5">4th
<input type="radio" value="5th" name="sem" id="test5">5th
<input type="radio" value="6th" name="sem" id="test5">6th
<input type="radio" value="7th" name="sem" id="test5">7th
<input type="radio" value="8th" name="sem" id="test5">8th
<br>
<input type="submit" value="Submit"id="hello">
<table border="1" style="border: solid 1px black">
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Roll Number</td>
<td>Faculty</td>
<td>Semester</td>
</tr>
</table>
</body>
</html>
如果您没有按字母顺序排列变量的原因,则可以改用 for 循环:
$(document).ready(function(){
$("#hello").click(function(){
$row = $('<tr/>');
for(i=1; i<=5; i++){
cellVal = i < 5 ? $("#test"+i).val() : $("input[name=sem]:checked").val();
$row.append($("<td/>").text(cellVal));
}
$('table').append($row);
});
});
但是请重新考虑您的复选框,您的 DOM 中的任何位置都不能有重复的 ID。我添加了一个解决方法,但绝对可以摆脱这些重复项。
JSFiddle
首先,您应该使用 append()
在父元素的末尾在 DOM 中创建一个元素。这样可以避免增加计数器的麻烦。其次,您的单选按钮包含无效的重复id
属性。更改无线电 HTML 以使用类对它们进行分组:
<input type="radio" value="1st" name="sem" class="test5">1st
<input type="radio" value="2nd" name="sem" class="test5">2nd
<input type="radio" value="3rd" name="sem" class="test5">3rd
<input type="radio" value="4th" name="sem" class="test5">4th
<input type="radio" value="5th" name="sem" class="test5">5th
<input type="radio" value="6th" name="sem" class="test5">6th
<input type="radio" value="7th" name="sem" class="test5">7th
<input type="radio" value="8th" name="sem" class="test5">8th
然后,可以将此类与:checked
选择器一起使用以获取所选值。请注意此处append()
的使用:
$("#hello").click(function () {
var $tr = $('<tr />');
$tr.append($("<td />", { text: $("#test1").val() }))
$tr.append($("<td />", { text: $("#test2").val() }))
$tr.append($("<td />", { text: $("#test3").val() }))
$tr.append($("<td />", { text: $("#test4").val() }))
$tr.append($("<td />", { text: $(".test5:checked").val() }))
$tr.appendTo('table');
});
示例小提琴
这个
呢:
只需将值缓存在变量中,然后将它们连接成一个变量
http://jsfiddle.net/nC6FJ/2/
var i=0;
$(document).ready(function(){
$("#hello").click(function(){
var a = $("#test1").val(),
b = $("#test2").val(),
c = $("#test3").val(),
d = $("#test4").val(),
e = $("#test5").val(),
tdHTML = "<td>"+a+"</td>"+
"<td>"+b+"</td>"+
"<td>"+c+"</td>"+
"<td>"+d+"</td>"+
"<td>"+e+"</td>";
$("table tr").eq(i).after(tdHTML);
i=i+1;
});
});
此外,您不必将jQuery元素对象嵌套到另一个对象中。
相关文章:
- 将样式表插入iframe
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 如何动态插入jquery代码
- 动态插入的表:JQuery未检测到最后一行
- Dojo:访问dijit.form.Select中单击的项目
- 使用JavaScript动态插入DIV的成本有多高
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 将对象动态插入到现有对象中
- Javascript form innerHTML
- 将数组中的值插入到表中
- 在 Java 中的 JavaScript 函数中插入 Wicket 值
- 我如何在数字插入中使用逗号,这样它就不会'不要破坏我的输入字段
- 使用PHP插入HTML在JavaScript上不起作用
- javascript:将数据库中的数据插入到html5文本字段中
- 从数据库中获取数据并插入JavaScript变量
- 如何使用innerHtml正确插入html
- 在 jQuery 中使用 form 将值插入到表中
- 如何在jquery mRender中插入spring-form标记
- 使用Javascript将行插入FORM中的HTML表
- 如何将文本插入到class="block form-group"