Question

我在表格中有3行，其中1行可见，2行隐藏。我想在单击按钮时显示隐藏的行。下面是html表和Jquery函数，但它不运行也不显示任何错误。

＆＃13;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<table id="employee_grid" cellspacing="0">  
<tbody id="_editable_table">			  
	<tr data-row-id="1" class="sum" name="data-row-id_1" id="data-row-id_1" style="display:visible;"> 
		<td align="center">1</td>	
		<td class="editable-col" contenteditable="true" col-index='1' oldVal ="Basic Salary">Basic Salary</td>
		<td amount class="editable-col" contenteditable="true" col-index='2' oldVal ="1000.00" onkeyup="CalculateMonthlySalary();">1000.00</td>
      </tr>  	  	  
	<tr data-row-id="2" class="sum" name="data-row-id_2" id="data-row-id_2" style="display:none;">  		
		<td align="center">2</td>	
		<td class="editable-col" contenteditable="true" col-index='1' oldVal =""></td>
		<td amount class="editable-col" contenteditable="true" col-index='2' oldVal ="1000.00" onkeyup="CalculateMonthlySalary();"></td>
      </tr>   	  	  
	<tr data-row-id="3" class="sum" name="data-row-id_3" id="data-row-id_3" style="display:none;">  		
		<td align="center">3</td>		
		<td class="editable-col" contenteditable="true" col-index='1' oldVal =""></td>
		<td amount class="editable-col" contenteditable="true" col-index='2' oldVal ="1000.00" onkeyup="CalculateMonthlySalary();"></td>
      </tr>   		  
	<tr><td colspan="3"><button onclick="AddItemRow();">Add New Row</button></td></tr>
</tbody>
</table>

＆＃13;

脚本到这里

<script type="text/javascript" language="JavaScript">
var iRowCounter = 3;
var iRowVisible = 1;
var iTotalRows = 3;


function AddItemRow() {
            $("#data-row-id_" + iRowVisible).slideDown(800);            
            iRowVisible++;
}

</script>

Answer 1

您的问题是您忘记向HTML页面添加脚本路径。 slideDown()是JQuery的一部分，但AddItemRow()不是。

页面顶部的内容是JQuery的src，而不是脚本文件。您需要添加另一个src=<path to your js file>，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="<location of the script with AddItemRow>"></script>

Answer 2

问题出在页面内部。这个功能没有任何问题。所述＆＃34;形式＆＃34;页面中的标记给出了问题。删除后，它可以正常工作。

Jquery使用SlideDown（）显示隐藏的表行

2 个答案: