我有一个从后端获取数据并显示的表。它每隔几秒刷新一次。用户可以按下“编辑”按钮并停止加载表格，按下该按钮后，会在整个表格中附加一个带有“编辑”按钮的附加列。一旦用户按下该特定行的“编辑”，则只能编辑该行。现在这一行包含一个字段，该字段应该是一个下拉选择菜单，只有很少的选项。选择其中一个选项后，按下“应用”按钮，后置请求将显示标题中发送的所有选项。 下面这个函数解析xml数据并准备表结构： - （这里没问题）
function parseAlmSettingDataXml(xml)
{
var $xml = $(xml),
numOfAlms = $xml.find('alrmNum').text();
use = 0,
alarmData = $xml.find('alrmData').text();
$(function(){
var rowCount=0;
var r1 = new Array(), r2 = new Array();
$.each(JSON.parse(alarmData.replace(/"/g,'"')), function(){
if (rowCount < 10) {
populateArray(r1, this);
}
else {
populateArray(r2, this);
}
rowCount++;
});
$('#itemList1 tbody').html(r1.join(''));
$('#itemList2 tbody').html(r2.join(''));
//selectmenu is initialized only when table is made
$('.alarmlvl').selectmenu({disabled:true});
// Hide tables not used
if (rowCount < 1) {
if ( $( "#table1" )[0] != undefined) {$( "#table1" )[0].style.display="none";}
if ( $( "#table2" )[0] != undefined ) {$( "#table2" )[0].style.display="none";}
}
else {
if ( $( "#table1" )[0] != undefined) {$( "#table1" )[0].style.display="";}
if (rowCount < 10) {
if ( $( "#table2" )[0] != undefined){$( "#table2" )[0].style.display="none";}
}
else {
if ( $( "#table2" )[0] != undefined){$( "#table2" )[0].style.display="";}
}
}
});
}
这是populateArray函数，用数据填充表格（这里没问题）： -
function populateArray(a, d)
{
var level = typeof(d.lvl) == 'undefined' ? 'UNK' : d.lvl;
a.push('<tr>');
a.push('<td>');
a.push(d.desc); //alarm desc
a.push('</td>');
a.push('<td>');
a.push('<select class="alarmlvl"><option selected value='+level+'>'+level+'</option></select>'); //alarm level
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.sett); //alarm set time
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.clrt); //alarm clear time
a.push('</td>');
a.push('</tr>');
}
下面是点击全局“编辑”按钮时： -
$("#editFields").click(function(){
clearInterval(ajax_interval);
/*need timeout to stop table load and add another column for edit*/
setTimeout(function(){
$("tbody tr").each(function(){
$(this).append("<td><button class='editRow'>Edit</button></td>");
});
//making editable rows highlight
$(".editRow").button().click(function(e){
e.preventDefault();
$(this).closest("tr").css('border','5px solid red').find("td").attr("contentEditable","true");
$(this).closest("tr").find('.alarmlvl').selectmenu('option','disabled',false);
var alarmLevel=$(this).closest("tr").find(".alarmlvl :selected").text();
alarmLevelDropdown(alarmLevel);
});
}, 500);
});
function alarmLevelDropdown(currentLevel){
switch(currentLevel){
case 'IGN': $(".alarmlvl").append("<option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'NFY': $(".alarmlvl").append("<option value='IGN'>IGN</option><option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'MIN': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'MAJ': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='CRI'>CRI</option>");
break;
case 'CRI': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option>");
break;
default: console.log("invalid alarm level!");
break;
}
}
单击全局“应用”按钮时，问题出现在下面： -
$("#applyButton").click(function(){
$("#editFields").button("option","disabled",false);
$("#applyButton").button("option","disabled",true);
$("#cancelButton").button("option","disabled",true);
$("tbody tr").find("td").each(function(){
//traversing rows and adding td that are editable and making sure Edit buttons are not included in the array
if($(this).is("[contentEditable ='true']") && $(this).text() !== "Edit"){
if($(this).find('select.alarmlvl').length){ //checking if this is dropdown selector
tableData.push($(this).text()); //maybe changes required here ..im missing out on something
}
else{
tableData.push($(this).text());
}
}
});
表单提交部分： -
$("#adminForm").submit();
if (console !== undefined) {console.log("apply clicked, ajaxdata2 should start");}
ajax_interval=setInterval(loadAjaxData2, 1 * 1000);
});
$("#adminForm").submit(function(e){
var tableDataAsString=JSON.stringify(tableData);
$.ajax({
type : 'POST',
url : '/scripts/postServices.php' ,
data : {mydata: tableDataAsString}
}).done(function(data) {
data=$.trim(data);
console.log("Response: "+data);
tableData=[]; //clearing the array
});
e.preventDefault();
});
以下是表单标记： -
<form id="adminForm">
<div id="protocolParIcons">
<a href="#!" class="sbtooltip" title="Apply"><button id="applyButton" type="submit" class="ui-icon ui-icon-circle-check" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Cancel"><button id="cancelButton" class="ui-icon ui-icon-cancel" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Edit"><button id="editFields" class="ui-icon ui-icon-pencil" style="display:none;"></button></a>
</div>
<div id="protocolParMain" style="height:580px">
<div id="alarmData" style="font-size:0.8em">
<div class="alarmDataTable" id="table1" style="margin-left:20px">
<table border="1" id="itemList1">
<thead>
<tr>
<th>Description    </th>
<th>Level    </th>
<th>setTime   </th>
<th>clrTime       </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="alarmDataTable" id="table2" style="display:none;">
<table border="1" id="itemList2" width="360px">
<thead>
<tr>
<th>Description    </th>
<th>Level    </th>
<th>setTime   </th>
<th>clrTime       </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</form>
答案 0 :(得分：1)
而不是tableData.push($(this).text())
尝试
tableData.push($(this).find('.select.alarmlvl option:selected').text()。基本上你需要获取所选选项的文本，你的函数返回整个选择框的文本，包括所有选项，是否选中
答案 1 :(得分：0)
if($(this).find('select.alarmlvl').length){
selector tableData.push($(this).find('select.alarmlvl').val());
}