Question

我已编写此代码以从DB检索值并将其放入listitem中，其工作正常，这是我的html代码：我已经添加了所有插件。

<html>
<head>

    $('#showcollapsed li').live('click',function(event)
    {  var txt = $(this).text();
        window.localStorage.setItem("clickedValueofList",txt);
        $.mobile.changePage('#viewInformation',null,true,true);
        getDataofSelectedListItem();
    });

这是我的代码，但它无法正常工作。

$('#list1').on('click','li',function()
    {
        $(this).hide();
        $('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
    });

    $('#editTextBox').focusout(function()
    {
        //$('#list1').listview('refresh');
        $(this).hide();
        $(this).siblings('#list1').show().text($(this).val());

    });

 </head>
<body>
        <div data-role="page" id="viewUser" data-theme="d">
         <div data-role="header" data-theme="e" class="ui-bar ui-bar-e">
          <a href="#" id="backbtn" data-role="button" data-icon="arrow-l">BACK</a>
          <h3>STUDENT INFO</h3>
         </div>
         <div data-role="content">
            <a href="#" id="showinfo" data-role="button" style="width:100px;">SHOW</a>
           <div data-role="collapsible-set" id="showinfodiv" data-theme="b" data-content-theme="d">
           <div data-role="collapsible" id="showcollapsed" data-collapsed-icon ="plus" data-iconpos="left">
            <h3>user names</h3>
           <ul id="list" content-editable="true" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..."  data-filter-theme="e"></ul>
               <li content-editable="true">fdfdfd</li>
              </div>   
           </div>  
         </div> 
        </div> 
        <div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
          <div data-role="header" id="headerid" class="ui-bar ui-bar-b">

           <h3></h3> 
          </div>
           <div data-role="content" id="contentid">
           <ul id="list1" data-role="listview" data-theme="e"></ul> 

            <input type="text" id="editTextBox" style="display:none"/> 
            <a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a> 
          </div>
        </div>
    </body>
    </html>

现在我的下一个任务是编辑动态listitem意味着当用户点击第一个列表项时，列表项应该由TEXTBOX替换，当用户完成编辑时，其他未被点击的列表项将保持相同，现在文本框应该隐藏最近的编辑文本应该出现在listitem中，类似于listitem的其余部分，但是用户一次只能编辑一个列表项。为实现这个目标而难以实现。
.js代码：
//从数据库中获取数据并将其动态地放入listview中，使其工作正常

 function getDataofSelectedListItem()
    {
        alert("getDataofSelectedListI");
        clickedListItem = window.localStorage.getItem("clickedValueofList");
        console.log("clicked list item"+clickedListItem);
        //db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
        var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';

        console.log("selected list query:"+sqlQuery);
        db.transaction(function(tx)
        {
          tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
        },errorCB,successCB);
    }
    function successCBofListItem(tx,results)
    {   alert("erer");
      if(results != null && results.rows != null && results.rows.length > 0) 
         { alert("fdfdf");

         $('#list1').append('<li> UserName: '+results.rows.item(0).username+'</li>');
         $('#list1').append('<li> Password:' +results.rows.item(0).password+'</li>');
         $('#list1').append('<li> Emailid:' +results.rows.item(0).emailid+'</li>');
         console.log("username:" + results.rows.item(0).username);
         console.log("emailid:" + results.rows.item(0).emailid);
         console.log("password:" + results.rows.item(0).password);
         }
       $('#list1').listview('refresh');
    }
    function errorCBofListItem()
    {
        alert("errorCBofListItem");
    }

这是我的代码，但它无法正常工作。

$('#list1').on('click','li',function()
    {
        $(this).hide();
        $('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
    });

 $('#editTextBox').focusout(function()
    {       $(this).hide();
        $(this).siblings('#list1').show().text($(this).val());

    });

如何编辑动态列表项文本并将其保存在DB中？

0 个答案: