代码之家 › 专栏 › 技术社区 › DevlshOne

使用jQuery在无序列表中的特定位置添加空行

html-lists jquery-ui

DevlshOne · 技术社区 · 14 年前

<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>

从每个“li”中的onClick函数可以看出,我希望单击该行左侧的一个小按钮,并在该空间中插入一个新的空行,同时对该行后面的项目重新编号。addMLRow()函数将始终传递列表中项目所在的位置,以及包含小按钮的行的id。

任何帮助都将不胜感激!!!!

2 回复 | 直到 14 年前

DevlshOne 14 年前

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);
    });
}

可能仍然不是最优雅的解决方案,但它的工作!

Jhong 14 年前

不管怎样,您都不需要所有的span id和单个onclick。

以下内容将在单击任何LI(包括空白LI)之前插入一个空行,无需任何onclick。

$('#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>');

});