使用jquery中的表格向表中插入值

只有第一個給定的值被插入表中。變量i用於遞增表中tr的索引值，它是遞增的，但值不插入。其他人不添加。無法弄清楚原因。我是jquery的新手。使用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>

來源

2013-10-25 Talib Shabbir Hussain

首先，您應該使用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'); 
});

Example fiddle

來源

2013-10-25 15:09:11

非常感謝.. –

@ user2868650沒問題。不要忘記上傳並接受答案。 –

如果你不具備按字母順序排列變量的原因，你可以只使用一個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-25 15:09:51 George

請注意學期字段中重複的「id」。 –

@anOG - 這是如何被模擬爲...？ – N20084753

非常感謝.. –

這個什麼：

只是緩存自己的價值觀的變量，然後將它們連接成一個變量

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-25 15:14:21

使用jquery中的表格向表中插入值

回答

相關問題