添加在某个位置的空白行中的无序列表使用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样式。