我有一个动态添加行的javascript表
代码如下
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set checkbox by default checked
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = false;
$.ajax({
type: "GET",
url: '/SalesPropeller/Admin/Sales/goal.jsp',
async: false,
success: function(data) {
element7 = true;
},
error: function() {
alert("Your error");
},
});
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
当我点击“Addrow”按钮然后行正在添加但是在最后一个单元格中是“Vat5.5”我需要从另一个jsp页面获取数据,所以我用来使用ajax调用jsp显示数据,但在写完ajax代码后,它无法显示数据。
goal.jsp
<body>
<div id="welcomeDiv"> WELCOME</div>
</body>
此图片用于表示我是否有正确的路径。
所以我的问题是如何在“Vat5.5”单元格中显示数据。我不知道我是否在ajax调用中做错了我猜。任何帮助将不胜感激。
答案 0 :(得分:2)
修改强>
如果goal.jsp
正在输出数据(WELCOME),则应为
String data = "WELCOME";
out.print(data);
并在JavaScript中
// define a variable outside AJAX call
var jspData;
并成功实施
success: function (data){
jspData = data; //response
element7 = true;
}
编辑前
假设您的数据是String,以某种方式获取JSP数据并保存在String
中String jspData; // contains your jsp data
// In JSP(HTML)
<input id="jsp-data" type="hidden" value="<%=jspData%>" />
// In JavaScript
var data = document.getElementById('jsp-data').value;
现在,您可以在JavaScript中使用data
。