表为空

表为空

关注
发信
关注(28)粉丝(399)

jquery - 我正在尝试使用jQuery添加<tr>表为空</tr>？

如果表为空，则表显示表为空，如果有数据，则显示该表。

代码链接在那里

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>

最佳答案

jquery - 我正在尝试使用jQuery添加&lt;tr&gt;表为空&lt;/tr&gt;？-LMLPHP在您的提琴中将var cnt;更改为var cnt = 0;

如果条件为

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


请注意，您没有为cnt变量分配任何值，请检查

希望这对您有帮助

关于jquery - 我正在尝试使用jQuery添加<tr>表为空</tr>？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48657164/

10-12 16:23
Powered by LMLPHP ©2024 表为空 0.043646