我有一个项目,我在其中动态生成一行单元格。说得更清楚,在我的场景中,我连续有8-9个细胞。第一个和第二个单元格是按钮,之后是文本框。现在页面加载时会自动添加5 rows
。当用户填充这5行中的数据,并且他/她到达最后一行时,在最后一行的最后一个单元格的标签后,生成新的5行。
我使用JavaScript完成了这项工作。现在,当我添加这5个新行时,无法在新生成的行的first textbox (3rd cell)
上实现焦点。如何将焦点设置在新生成的行的文本框上?
我的行代码:
function onRowDoubleClick_Add_Row(id, rowNo)
{
var New_RowNo = (parseInt(rowNo) + parseInt(1));
var table = document.getElementById('<%= tblItem.ClientID %>');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.setAttribute("class", "gridRow");
// Delete
var cell11 = row.insertCell(0);
cell11.setAttribute("style", "width:20px;");
var C11_element2 = document.createElement("input");
var C11_EID = "MainContent_Image" + New_RowNo + "_" + New_RowNo + "_A_" + New_RowNo; //"MainContent_Image10_A_10"
var C11_EName = "ctl00$MainContent$Image" + New_RowNo + "_" + New_RowNo + "_A_" + New_RowNo; //"ctl00$MainContent$Image10_A_10"
C11_element2.type = "image";
C11_element2.setAttribute("src", "Images/collapse.gif");
C11_element2.setAttribute("title", "Delete");
C11_element2.setAttribute("id", C11_EID.toString());
var click = "return window.confirm('Are you sure you want to delete this item');";
C11_element2.setAttribute("Click", click);
C11_element2.setAttribute("name", C11_EName);
//var blur = "onRowDoubleClick_Add_Row('Image" + New_RowNo + "_A_" + New_RowNo + "','" + New_RowNo + "');";
//C11_element2.setAttribute("onblur", blur);
var Check_Delete = "Check_Delete('Image" + New_RowNo + "_A_" + New_RowNo + "');";
//C11_element2.setAttribute("onmousedown", Check_Delete);
cell11.appendChild(C11_element2);
// Iten Number
var cell1_1 = row.insertCell(1);
cell1_1.setAttribute("style", "width:25px;padding-right:5px;");
var C1_element1_1 = document.createElement("input");
C1_element1_1.type = "text";
C1_element1_1.setAttribute("style", "width:100%;");
C1_element1_1.setAttribute("id", "MainContent_txtItem" + New_RowNo);
var blur = "getItemNoValue('txtItem" + New_RowNo + "','" + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
C1_element1_1.setAttribute("onblur", blur);
C1_element1_1.setAttribute("name", "ctl00$MainContent$txtItem" + New_RowNo);
cell1_1.appendChild(C1_element1_1);
.
.
.
.
// Notes
var cell10 = row.insertCell(4);
cell10.setAttribute("style", "width:120px; padding-right: 5px;");
// Added by Shiv on 12-02-2013 To Set editor on main grid
var C10_element2 = document.createElement("textarea");
C10_element2.type = "text";
C10_element2.setAttribute("style", "width:100%; height:30px;visibility: visible;");
C10_element2.setAttribute("id", "MainContent_txtNote_New" + New_RowNo);
C10_element2.setAttribute("class", "setFCkeditor");
C10_element2.setAttribute("TextMode", "MultiLine");
var blur = "NoteChange('txtNote" + New_RowNo + "','" + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
C10_element2.setAttribute("onblur", blur);
C10_element2.setAttribute("name", "ctl00$MainContent$txtNote" + New_RowNo);
cell10.appendChild(C10_element2);
//Qty
var cell4 = row.insertCell(5);
cell4.setAttribute("style", "min-width:10px; padding-right: 5px;");
var C4_element2 = document.createElement("input");
C4_element2.type = "text";
C4_element2.setAttribute("style", "width:95%;");
C4_element2.setAttribute("id", "MainContent_txtQty" + New_RowNo);
var blur = "OrderQtyChange('txtQty" + New_RowNo + "',' " + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
C4_element2.setAttribute("onblur", blur);
C4_element2.setAttribute("name", "ctl00$MainContent$txtQty" + New_RowNo);
cell4.appendChild(C4_element2);
var C4_exID = "MainContent_FilteredTextBoxExtender_txtQty" + New_RowNo;
var C4_exPlant = "MainContent_txtQty" + New_RowNo;
Sys.Application.add_init(function () {
$create(Sys.Extended.UI.FilteredTextBoxBehavior,
{
"ValidChars": "1234567890.",
"id": C4_exID
},
null, null, $get(C4_exPlant));
});
//Hour
var cellHour = row.insertCell(6);
cellHour.setAttribute("style", "min-width:10px; padding-right: 5px;");
var cellHour_element2 = document.createElement("input");
cellHour_element2.type = "text";
cellHour_element2.setAttribute("style", "width:95%;");
cellHour_element2.setAttribute("id", "MainContent_txtHour" + New_RowNo);
var blur = "OrderQtyChange('txtQty" + New_RowNo + "',' " + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
cellHour_element2.setAttribute("onblur", blur);
cellHour_element2.setAttribute("name", "ctl00$MainContent$txtHour" + New_RowNo);
cellHour.appendChild(cellHour_element2);
var cellHour_exID = "MainContent_FilteredTextBoxExtender_txtHour" + New_RowNo;
var cellHour_exPlant = "MainContent_txtHour" + New_RowNo;
Sys.Application.add_init(function () {
$create(Sys.Extended.UI.FilteredTextBoxBehavior,
{
"ValidChars": "1234567890.",
"id": cellHour_exID
},
null, null, $get(cellHour_exPlant));
});
// Price
var cell6 = row.insertCell(7);
cell6.setAttribute("style", "width:50px; padding-right: 5px;text-align:right;");
var C6_element2 = document.createElement("input");
C6_element2.type = "text";
C6_element2.setAttribute("style", "width:95%; text-align:right;");
C6_element2.setAttribute("class", "priceChild");
C6_element2.setAttribute("id", "MainContent_txtPrice" + New_RowNo);
var blur = "OrderPriceChange('txtPrice" + New_RowNo + "','" + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
//blur += "onRowDoubleClick_Add_Row('txtPrice" + New_RowNo + "','" + New_RowNo + "');";
C6_element2.setAttribute("onblur", blur);
C6_element2.setAttribute("name", "ctl00$MainContent$txtPrice" + New_RowNo);
cell6.appendChild(C6_element2);
var C6_exID = "MainContent_FilteredTextBoxExtender_txtPrice" + New_RowNo;
var C6_exPlant = "MainContent_txtPrice" + New_RowNo;
Sys.Application.add_init(function () {
$create(Sys.Extended.UI.FilteredTextBoxBehavior,
{
"ValidChars": "1234567890.-",
"id": C6_exID
},
null, null, $get(C6_exPlant));
});
// Cost
var cellCost = row.insertCell(8);
cellCost.setAttribute("style", "width:50px;padding-right:5px;");
var cellCost_element1 = document.createElement("span");
cellCost_element1.setAttribute("style", "display:inline-block;width:100%;text-align:center;font-size:12px;");
cellCost_element1.setAttribute("id", "MainContent_lblCost" + New_RowNo);
cellCost_element1.setAttribute("onmouseover", "telerikDemo.onClientMouseOver(this, '0')");
cellCost.appendChild(cellCost_element1);
// Status
var cell7 = row.insertCell(9);
cell7.setAttribute("style", "width:75px; ");
var C7_element1 = document.createElement("span");
C7_element1.setAttribute("style", "display:inline-block;width:75px;text-align:center;");
C7_element1.setAttribute("id", "MainContent_lblStatus" + New_RowNo);
cell7.appendChild(C7_element1);
// Crew
var cell14 = row.insertCell(10);
cell14.setAttribute("style", "width:75px; ");
var C14_element1 = document.createElement("span");
C14_element1.setAttribute("style", "display:inline-block;width:75px; text-align:center;");
C14_element1.setAttribute("id", "MainContent_lblCrew" + New_RowNo);
cell7.appendChild(C14_element1);
var cell12 = row.insertCell(11);
cell12.setAttribute("style", "width:20px;");
var C12_EID = "MainContent_More" + New_RowNo + "_A_" + New_RowNo; //"MainContent_Image10_A_10"
var C12_element2 = document.createElement('a');
C12_element2.setAttribute("id", C12_EID);
var linkText = document.createElement('img');
linkText.setAttribute("src", "Images/more.png");
C12_element2.appendChild(linkText);
C12_element2.title = "More";
C12_element2.setAttribute("style", "display:inline-block;height:15px;width:15px;");
var more_click = "ShowMore('More" + New_RowNo + "_A_" + New_RowNo + "','" + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_','1');"
C12_element2.setAttribute("onclick", more_click);
cell12.appendChild(C12_element2);
var cell13 = row.insertCell(11);
cell13.setAttribute("style", "width:20px;");
// Invoice_Check
var cell8 = row.insertCell(13);
cell8.setAttribute("style", "width:20px;");
var C8_element2 = document.createElement("input");
C8_element2.type = "checkbox";
C8_element2.setAttribute("style", "width:20px;");
C8_element2.setAttribute("id", "MainContent_chbInv" + New_RowNo);
var blur = "OfferChange('chbInv" + New_RowNo + "','" + New_RowNo + "','" + New_RowNo + "','A_" + New_RowNo + "','A_');";
C8_element2.setAttribute("onclick", blur);
C8_element2.setAttribute("name", "ctl00$MainContent$chbInv" + New_RowNo);
cell8.appendChild(C8_element2);
var C8_element2_dummy = document.createElement("input");
C8_element2_dummy.type = "text";
C8_element2_dummy.setAttribute("style", "border: 0px solid !important; border-radius: 0px !important; color: #333333; height: 0.1px; opacity: 0.00; padding: 0px !important; width: 0.1px;");
C8_element2_dummy.setAttribute("id", "MainContent_txtAddRowDummies" + New_RowNo);
C8_element2_dummy.setAttribute("onblur", "onRowDoubleClick_Add_Row('txtAddRowDummies" + New_RowNo + "','" + New_RowNo + "');");
C8_element2_dummy.setAttribute("name", "ctl00$MainContent$txtAddRowDummies" + New_RowNo);
cell8.appendChild(C8_element2_dummy);
document.getElementById("MainContent_" + id).removeAttribute("onBlur");
DemoArborGold.JobInformation1.AddRow(New_RowNo.toString());
// Commented by Shiv on 28-02-2014
//var clickButton = document.getElementById(C11_EID);
// Added by Shiv on 28-02-2014
var clickButton = document.getElementById('<%=btnDumies_Add_Roe_Fire.ClientID %>');
clickButton.click();
}
$(document).ready(function ()
{
$("input[name*='txtAddRowDummies']").live('blur', function ()
{
try
{
$(this).parent('td').parent('tr').next().find('input[name*="txtItem"]').focus();
}
catch (ex)
{
}
});
});
.
不要查看代码的长度。在此代码中,您将看到onRowDoubleClick_Add_Row
方法。我在最后一行的最后一个单元格的blur
上调用此方法。此功能new 5 rows
添加后,焦点丢失。焦点应该在新生成的行部分的// item number
上。