JavaScript / jQuery Contition - Add table cell based html select
<p>I have a table as follows which our employees can add table cell if they have more than one product in their hand by <code>EKLE</code> button or can delete by <code>SİL</code> button :</p>

<p><strong>HTML</strong>
</p>

<pre><code>&lt;table border="0" cellpadding="0" cellspacing="0" id="productDetail"&gt;
&lt;tr&gt;
    &lt;td width="240"&gt;
        &lt;select id="product" name="product"&gt;
            &lt;option value="0"&gt;seçiniz..&lt;/option&gt;
            &lt;option value="1"&gt;İÇECEK&lt;/option&gt;
            &lt;option value="2"&gt;KONSERVE&lt;/option&gt;
            &lt;option value="3"&gt;ŞARKÜTERİ&lt;/option&gt;
            &lt;option value="4"&gt;ŞEKERLEME&lt;/option&gt;
            &lt;option value="5"&gt;KURU GIDA&lt;/option&gt;
            &lt;option value="6"&gt;DETERJAN&lt;/option&gt;
            &lt;option value="7"&gt;MOBİLYA&lt;/option&gt;
            &lt;option value="8"&gt;MEYVE SEBZE ve ET&lt;/option&gt;
            &lt;option value="9"&gt;KÖMÜR&lt;/option&gt;
            &lt;option value="10"&gt;METROPOST TAŞIMA&lt;/option&gt;
            &lt;option value="11"&gt;BÜRO TAŞIMA&lt;/option&gt;
            &lt;option value="12"&gt;NONFOOD ETİKETLEME&lt;/option&gt;
            &lt;option value="13"&gt;RAMPA KİRASI&lt;/option&gt;
        &lt;/select&gt;            
    &lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="80"&gt;&lt;input name="qty" type="text" id="qty" autocomplete="off" size="15" /&gt;&lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="90"&gt;
        &lt;select id="unitPrice" name="unitPrice"&gt;
            &lt;option value=""&gt;seçiniz...&lt;/option&gt;
            &lt;option value="34.92"&gt;TON&lt;/option&gt;
            &lt;option value="138.59"&gt;KAMYON&lt;/option&gt;
            &lt;option value="45.65"&gt;GÜN&lt;/option&gt;
            &lt;option value="5.50"&gt;SAAT&lt;/option&gt;
        &lt;/select&gt;            
    &lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="125" align="right"&gt;&lt;input type="text" size="18" readonly="readonly" name="Price" id="Price" /&gt;&lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="125" align="right"&gt;&lt;input name="total" type="text" size="18" readonly="readonly" id="total" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" class="del" value="SİL" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td width="240"&gt;
        &lt;select id="product" name="product"&gt;
            &lt;option value="0"&gt;seçiniz..&lt;/option&gt;
            &lt;option value="1"&gt;İÇECEK&lt;/option&gt;
            &lt;option value="2"&gt;KONSERVE&lt;/option&gt;
            &lt;option value="3"&gt;ŞARKÜTERİ&lt;/option&gt;
            &lt;option value="4"&gt;ŞEKERLEME&lt;/option&gt;
            &lt;option value="5"&gt;KURU GIDA&lt;/option&gt;
            &lt;option value="6"&gt;DETERJAN&lt;/option&gt;
            &lt;option value="7"&gt;MOBİLYA&lt;/option&gt;
            &lt;option value="8"&gt;MEYVE SEBZE ve ET&lt;/option&gt;
            &lt;option value="9"&gt;KÖMÜR&lt;/option&gt;
            &lt;option value="10"&gt;METROPOST TAŞIMA&lt;/option&gt;
            &lt;option value="11"&gt;BÜRO TAŞIMA&lt;/option&gt;
            &lt;option value="12"&gt;NONFOOD ETİKETLEME&lt;/option&gt;
            &lt;option value="13"&gt;RAMPA KİRASI&lt;/option&gt;
        &lt;/select&gt;            
    &lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="80"&gt;&lt;input name="qty" type="text" id="qty" autocomplete="off" size="15" /&gt;&lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="90"&gt;
        &lt;select id="unitPrice" name="unitPrice"&gt;
            &lt;option value=""&gt;seçiniz...&lt;/option&gt;
            &lt;option value="34.92"&gt;TON&lt;/option&gt;
            &lt;option value="138.59"&gt;KAMYON&lt;/option&gt;
            &lt;option value="45.65"&gt;GÜN&lt;/option&gt;
            &lt;option value="5.50"&gt;SAAT&lt;/option&gt;
        &lt;/select&gt;            
    &lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="125" align="right"&gt;&lt;input type="text" size="18" readonly="readonly" name="Price" id="Price" /&gt;&lt;/td&gt;
    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="125" align="right"&gt;&lt;input name="total" type="text" size="18" readonly="readonly" id="total" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" class="add" value="EKLE" /&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p></p>



<p><strong>JQUERY</strong>
</p>

<pre><code>    $(document).ready(function() {
    $("[id^='qty'], [id^='unitPrice']").live('change', function() {
        var total = 0;
        var $row = $(this).closest("tr");
        var qty = parseFloat($row.find("#qty").val());
        var price = parseFloat($row.find("#unitPrice").val());

        total = qty * price;

        if(isNaN(total)) {
            $row.find('#total').val("");
        } else {
            $row.find('#total').val(total);
            var sum = $("input[name='total']").sum();
            $("#grandTotal").text(sum.toString() + " TL");
        }

        if(isNaN(price)) {
            $row.find('#Price').val("");
        } else {
            $row.find('#Price').val(price);
        }
    });

    $("#invoiceToCompany").click(function() {
        if($(this).is(":checked")){
            $("#companyAddress").removeAttr("disabled");
        } else {
            $("#companyAddress").attr("disabled","disabled");
        }
    });

    $("#invoiceToCurrentAccount").click(function() {
        if($(this).is(":checked")){
            $("#personAddress").removeAttr("disabled");
        } else {
            $("#personAddress").attr("disabled","disabled");
        }
    });

    $('.del').live('click', function() {
        $(this).parent().parent().remove();
    });

    $('.add').live('click', function() {
        var $rows = $(this).closest("tr");
        if($rows.find("#product").val() !=0) {
        $(this).val('SİL');
        $(this).attr('class', 'del');
        var appendRow = "&lt;tr&gt;&lt;td&gt;&lt;select id='product' name='product[]'&gt;&lt;option value='0'&gt;seçiniz...&lt;/option&gt;&lt;/option value='1'&gt;İÇECEK&lt;/option&gt;&lt;option value='2'&gt;KONSERVE&lt;/option&gt;&lt;option value='3'&gt;ŞARKÜTERİ&lt;/option&gt;&lt;option value='4'&gt;ŞEKERLEME&lt;/option&gt;&lt;option value='5'&gt;KURU GIDA&lt;/option&gt;&lt;option value='6'&gt;DETERJAN&lt;/option&gt;&lt;option value='7'&gt;MOBİLYA&lt;/option&gt;&lt;option value='8'&gt;MEYVE SEBZE ve ET&lt;/option&gt;&lt;option value='9'&gt;KÖMÜR&lt;/option&gt;&lt;option value='10'&gt;METROPOST TAŞIMA&lt;/option&gt;&lt;option value='11'&gt;BÜRO TAŞIMA&lt;/option&gt;&lt;option value='12'&gt;NONFOOD ETİKETLEME&lt;/option&gt;&lt;option value='13'&gt;RAMPA KİRASI&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;"
        appendRow += "&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='qty' type='text' id='qty' autocomplete='off' size='15' /&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;";
        appendRow += "&lt;td&gt;&lt;select id='unitPrice' name='unitPrice[]'&gt;&lt;option value=''&gt;seçiniz...&lt;/option&gt;&lt;option value='34.92'&gt;TON&lt;/option&gt;&lt;option value='138.59'&gt;KAMYON&lt;/option&gt;&lt;option value='45.65'&gt;GÜN&lt;/option&gt;&lt;option value='5.50'&gt;SAAT&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;";
        appendRow += "&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' size='18' readonly='readonly' name='Price' id='Price' /&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='total' type='text' size='18' readonly='readonly' id='total' /&gt;&lt;/td&gt;";
        appendRow += "&lt;td&gt;&lt;input type='button' class='add' value='EKLE' /&gt;&lt;/td&gt;&lt;/tr&gt;";
        $("tr:last").after(appendRow);
        } else {
            window.alert("Bir hammaliye tipi seçmelisiniz!");
        }
    });
});
</code></pre>

<p>What I want to do, when employee select <code>METROPOST TAŞIMA</code> which is value 10, the jQuery should open an extra input field ( table cell ). I tried IF-ELSE IF mechanism but no success ( to tell the truth, I don't know how can I trigger an event inside the <code>live</code> function).</p>

<p>Long story short, <code>appendRow</code> should be like that if value is 10 :</p>



<pre><code>                $(this).val('SİL');
                $(this).attr('class', 'del');
                var appendRow = "&lt;tr&gt;&lt;td&gt;&lt;select id='product' name='product[]'&gt;&lt;option value='0'&gt;seçiniz...&lt;/option&gt;&lt;/option value='1'&gt;İÇECEK&lt;/option&gt;&lt;option value='2'&gt;KONSERVE&lt;/option&gt;&lt;option value='3'&gt;ŞARKÜTERİ&lt;/option&gt;&lt;option value='4'&gt;ŞEKERLEME&lt;/option&gt;&lt;option value='5'&gt;KURU GIDA&lt;/option&gt;&lt;option value='6'&gt;DETERJAN&lt;/option&gt;&lt;option value='7'&gt;MOBİLYA&lt;/option&gt;&lt;option value='8'&gt;MEYVE SEBZE ve ET&lt;/option&gt;&lt;option value='9'&gt;KÖMÜR&lt;/option&gt;&lt;option value='10'&gt;METROPOST TAŞIMA&lt;/option&gt;&lt;option value='11'&gt;BÜRO TAŞIMA&lt;/option&gt;&lt;option value='12'&gt;NONFOOD ETİKETLEME&lt;/option&gt;&lt;option value='13'&gt;RAMPA KİRASI&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;"
                appendRow += "&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='qty' type='text' id='qty' autocomplete='off' size='15' /&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;";
                appendRow += "&lt;td&gt;&lt;select id='unitPrice' name='unitPrice[]'&gt;&lt;option value=''&gt;seçiniz...&lt;/option&gt;&lt;option value='34.92'&gt;TON&lt;/option&gt;&lt;option value='138.59'&gt;KAMYON&lt;/option&gt;&lt;option value='45.65'&gt;GÜN&lt;/option&gt;&lt;option value='5.50'&gt;SAAT&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;";
                appendRow += "&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' size='18' readonly='readonly' name='Price' id='Price' /&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='total' type='text' size='18' readonly='readonly' id='total' /&gt;&lt;/td&gt;";
                appendRow += "&lt;td&gt;&lt;input type='button' class='add' value='EKLE' /&gt;&lt;/td&gt;";
                appendRow += "&lt;td&gt;METROPOST MASRAF YERİ&lt;/td&gt;&lt;td&gt;&lt;input name='masrafYeri' id='masrafYeri' autocomplete='off' size='10' /&gt;&lt;/td&gt;&lt;/tr&gt;";
                $("tr:last").after(appendRow);
</code></pre>
