我尝试使用jquery添加表是空的?

时间:2018-02-07 06:17:01

标签: jquery css html5

如果table为空,那么如果数据存在则表显示表为空,则显示它。

代码链接在那里

Link to jsFiddle

$(document).ready(function()
	{	
	
		
	
		$("#price,#t_pro").blur(function () {

			$('#total_price').val($('#price').val() * $('#t_pro').val());

		});
		$("#order").click(function(){	
			
			var shop_name = $("#s_name").val();
			var pro_name = $("#product_names").val();
			var email = $("#emailid").val();
			var mobi = $("#mobileno").val();
			var ur = $('input[name="are"]').val();
			var pric = $("#price").val();
			var total_pro = $("#t_pro").val();
			var total_pri = $("#total_price").val();
			
			var cnt;
			//var a=$('#mytab').empty();
			if(cnt=0)
			{     
				   var newRow = $("<tr><td>No Record found</td></tr>");
				   $("#mytab").append(newRow);
				   cnt--;

			} 
			else 
			{
					$("#mytab").append('<tr><td>'+ shop_name +'</td><td>'+ pro_name
							+'</td><td>'+ email +'</td><td>'+ mobi
							+'</td><td>'+ ur +'</td><td>'+ pric +'</td><td>'+ total_pro +'</td><td>'+ total_pri +'</td><td><button type="button" class="delete">Delete</button></td><td><button type="button" class="edit" >Edit</button></td></tr>');
						cnt++;
			}
			return cnt;
		
		});
		
		
		/*function Edit()
		{
			var par = $(this).parent().parent(); //tr 
			var shop_name = par.children("td:nth-child(1)"); 
			var pro_name = par.children("td:nth-child(2)"); 
			var email = par.children("td:nth-child(3)");
			var mobi = par.children("td:nth-child(4)");
			var ur = par.children("td:nth-child(5)");
			var pric = par.children("td:nth-child(6)");
			var total_pro = par.children("td:nth-child(7)");
			var total_pri = par.children("td:nth-child(8)");
			
			var tdButtons = par.children("td:nth-child(4)"); 
			shop_name.html("<input type='text' id='s_name' size='30' class='txt' value='"+shop_name.html()+"'/>"); 
			pro_name.html("<select id='product_names' class='product_name'><option value='"+pro_name.html+"'>select..</option><option value='"+pro_name.html+"'>PC</option><option value='"+pro_name.html+"'>Laptop</option><option value='"+pro_name.html+"'>Mobile Phone</option><option value='"+pro_name.html+"'>Plagma Screen</option></select>"); 
			email.html("<input type='text' id='emailid' size='30' value='"+email.html()+"'/>");
			mobi.html("<input type='text' id='mobileno' size='30' class='txt' value='"+mobi.html()+"'/>");
			ur.html("<input type='radio' name='are' value='"+ur.html()+"' size='10'>Buyer<input type='radio' name='are' value='"+ur.html()+"' size='10'>Seller");
			pric.html("<input type='text' id='price' size='30' class='txt' value='"+pric.html+"'/>");
			total_pro.html("<input type='text' id='t_pro' size='30' class='txt' value='"+total_pro.html+"'/>");
			total_pri.html("<input type='text' id='total_price' size='30' class='txt' value='"+total_pri.html+"'/>");
			
			 
			
			$(".btnSave").bind("click", Save);
			$(".edit").bind("click", Edit); 
			$(".delete").bind("click", Delete); 
		};
		function Save()
		{ 
			var par = $(this).parent().parent(); //tr 
			var shop_name = par.children("td:nth-child(1)"); 
			var pro_name = par.children("td:nth-child(2)"); 
			var email = par.children("td:nth-child(3)");
			var mobi = par.children("td:nth-child(4)");
			var ur = par.children("td:nth-child(5)");
			var pric = par.children("td:nth-child(6)");
			var total_pro = par.children("td:nth-child(7)");
			var total_pri = par.children("td:nth-child(8)");
			
			var tdButtons = par.children("td:nth-child(4)"); 
			shop_name.html("<input type='text' id='s_name' size='30' class='txt' value='"+shop_name.html()+"'/>"); 
			pro_name.html("<select id='product_names' class='product_name'><option value='"+pro_name.html+"'>select..</option><option value='"+pro_name.html+"'>PC</option><option value='"+pro_name.html+"'>Laptop</option><option value='"+pro_name.html+"'>Mobile Phone</option><option value='"+pro_name.html+"'>Plagma Screen</option></select>"); 
			email.html("<input type='text' id='emailid' size='30' value='"+email.html()+"'/>");
			mobi.html("<input type='text' id='mobileno' size='30' class='txt' value='"+mobi.html()+"'>");
			ur.html("<input type='radio' name='are' value='"+ur.html()+"' size='10'>Buyer<input type='radio' name='are' value='"+ur.html()+"' size='10'>Seller");
			pric.html("<input type='text' id='price' size='30' class='txt' value='"+pric.html+"'>");
			total_pro.html("<input type='text' id='t_pro' size='30' class='txt' value='"+total_pro.html+"'>");
			total_pri.html("<input type='text' id='total_price' size='30' class='txt' value='"+total_pri.html+"'>");
			
			 
			
			$(".btnSave").bind("click", Save);
			$(".edit").bind("click", Edit); 
			$(".delete").bind("click", Delete); 
		}; */



		
		$(document).on('click','.delete',function(){
			var par = $(this).parent().parent(); //tr
			par.remove();
		});
		
	});
input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.9em;
}
form div label {
  float: left;
  width: 20%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<style>


</style>




</head>
<body>
<form>

<table cellpadding="2" width="20%"  align="center" cellspacing="2">

	<tr>
	<td colspan=2>
	<center><font size=4><b>Product Detail Form</b></font></center>
	</td>
	</tr>

	<tr>
	<td>Shop Name</td>
	<td><input type="text" id="s_name" size="30" class="txt"></td>
	</tr>

	<tr>
	<td>Product Name</td>
	<td><select id="product_names" class="product_name">
	<option value="-1" selected>select..</option>
	<option value="pc">PC</option>
	<option value="laptop">Laptop</option>
	<option value="mobile_phone">Mobile Phone</option>
	<option value="plagma_screen">Plagma Screen</option>
	</select></td>
	</tr>

	<tr>
	<td>EmailId</td>
	<td><input type="text" id="emailid" size="30" class="txt"></td>
	</tr>

	<tr>
	<td>MobileNo</td>
	<td><input type="text" id="mobileno" size="30" class="txt"></td>
	</tr>

	<tr>
	<td>What You Are</td>
	<td><input type="radio" name="are" value="Buyer" size="10">Buyer
	<input type="radio" name="are" value="Seller" size="10">Seller</td>
	</tr>

	<tr>
	<td>Price</td>
	<td><input type="text" id="price" size="30" class="txt"></td>
	</tr>

	<tr>
	<td>Total Product</td>
	<td><input type="text" id="t_pro" size="30" class="txt"></td>
	</tr>

	<tr>
	<td>Total Price</td>
	<td><input type="text" id="total_price" size="30" class="txt"></td>
	</tr>

	<tr>
	<td><input type="reset" class="btn"></td>
	<td colspan="2"><input type="button" id="order" value="Order" /></td>
	</tr>
</table>
</form>

<table cellpadding="4" width="40%"  align="center" cellspacing="4" id="mytab" border="1">
	<tr>
		<th>ShopNmae</th>
		<th>Product Name</th>
		<th>EmailId</th>
		<th>MobileNo</th>
		<th>What You Are</th>
		<th>Price</th>
		<th>Total Product</th>
		<th>Total Price</th>
		<th>Action</th>
	</tr>
	
	
	
</table>

<script src="jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
	
	
	
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

Changes in your fiddle and working 在你的小提琴改变中var cnt;改为var cnt = 0;

如果条件改为

也会改变
if(cnt==0)
{     
    var newRow = $("<tr><td colspan='9'>No Record found</td></tr>");
    $("#mytab").append(newRow);
    cnt--;
} 

注意您没有为cnt变量赋值,请检查

希望这有助于你