添加在某個位置的空白行中的無序列表使用jQuery

Question

我有一個UL通過PHP和jQuery UI看起來像這樣創建：

<ul id="ml_organize"> 
<li id="il1" class="ui-state-default"><span id="add_hl1" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('1')";></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li> 
<li id="il13" class="ui-state-default"><span id="add_hl2" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('2')";></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li> 
<li id="il12" class="ui-state-default"><span id="add_hl3" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('3')";></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li> 
<li id="il11" class="ui-state-default"><span id="add_hl4" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('4')";></span><span class="org_qty">1</span><span class="org_partno">SPT6224</span><span class="org_desc">SPLIT TUBE 5/8" X 24" GRAY</span></li> 

<li id="il10" class="ui-state-default"><span id="add_hl5" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('5')";></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li> 
<li id="il9" class="ui-state-default"><span id="add_hl6" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('6')";></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X 24.0"</span></li> 
<li id="il8" class="ui-state-default"><span id="add_hl7" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('7')";></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li> 
<li id="il7" class="ui-state-default"><span id="add_hl8" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('8')";></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li> 
<li id="il6" class="ui-state-default"><span id="add_hl9" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('9')";></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li> 

<li id="il5" class="ui-state-default"><span id="add_hl10" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('10')";></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li> 
<li id="il4" class="ui-state-default"><span id="add_hl11" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('11')";></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li> 
<li id="il3" class="ui-state-default"><span id="add_hl12" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('12')";></span><span class="org_qty">4</span><span class="org_partno">ISS888</span><span class="org_desc">INSUL STRIP FOR BAYS-42" LONG</span></li> 
<li id="il2" class="ui-state-default"><span id="add_hl13" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('13')";></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li> 
<li id="il14" class="ui-state-default"><span id="add_hl14" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('14')";></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li> 

</ul> 

正如你可以在每一個的onClick功能，參見「 li「，我想單擊一行左邊的小按鈕，並在該空間中插入一個新的空白行，同時重新編號它後面的項目。 addMLRow（）函數將始終通過項目在列表中的位置，包含該小按鈕的行的id也一樣。

jQuery UI已經有一個函數來創建一個項目列表的數組，所以我可以傳回數據到一個數據庫，並有位置號碼，即使是黑線。

任何幫助將非常感謝！

Answer 1

恐怕您的解決方案無法正常工作，因爲它還會使每個添加的行可點擊以在其上創建一行。與添加的onClick標題行是不同的格式，你可以通過下面的代碼片段，請參閱：

function addMLRow(rowNo) { 
    var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'item\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>"; 
    $('#ml_organize li:eq(' + (rowNo - 1) + ')').before(newRow); 
    $('#hl_text' + rowNo + '').focus(function() { 
     $(this).css('background','#DDD'); 
    }); 
    $('#hl_text' + rowNo + '').blur(function() { 
     $(this).css('background','#FFF'); 
    }); 
    $('#hl_text' + rowNo + '').focus(); 
    // renumber rows after insert 
    $('#ml_organize li:gt(' + (rowNo - 1) + ')').each(function() { 
     var newID = 'li' + ($(this).index() + 1); 
     $(this).attr('id',newID); 
    }); 
} 

可能仍然不是最完美的解決方案，但它的工程！

Answer 2

在您的代碼中，您的span和li id不匹配。那是故意的嗎？

無論採用哪種方式，您都不需要所有的跨度ID和單個onClick。

下面將在任何LI（包括空白LIs）被點擊時插入一個空白行，而不需要任何onClicks。

$('#ml_organize li').live('click', function() { 
    $(this).before('<li class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line"></span><span class="org_qty">0</span><span class="org_partno"> </span><span class="org_desc"> </span></li>'); 

}); 

我還想看看簡化標記 - 所有重複類看起來有點浪費，當你可以使用父類的CSS樣式。