0

只有第一个给定的值被插入到表中。变量 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>
4

3 回答 3

2

如果您没有按字母顺序排列的变量的原因，则可以只使用 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

于 2013-10-25T15:09:51.177 回答
0

那这个呢：

只需将您的值缓存在变量中，然后将它们连接到一个变量中

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 元素对象嵌套到另一个

于 2013-10-25T15:14:21.543 回答
0

首先，您应该使用append()在 parent 末尾的 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');
});

示例小提琴

于 2013-10-25T15:09:11.513 回答