使用jQuery在表中获取dropbox和textbox值

时间:2014-11-27 09:43:32

标签: javascript jquery html asp.net

我试图做一件简单的事情。从onfocus事件的一个表行获取值。 我有这个不好的练习分配,在没有按钮点击的情况下插入数据库,所以我决定对行中的最后一个单元格使用onfocus事件。

问题是我对jquery和javaScript都很陌生,所以我很难选择这个Dropbox和文本框,并将值输入到变量中,稍后我将使用Ajax将其传递给代码隐藏。 / p>

有人可以帮我解决这个问题吗?

为了简单起见,这是其中一行的HTML,其他所有行都是相同的,表是静态的:

<table class="default-table" id="tblTest">
    <tr>
        <td>
            <select name="client" class='client'>
                <option>Choose client</option>
                <option>Client 1</option>
                <option>Client 2</option>
            </select>
        </td>
        <td>
            <select name="project" class='project'>
                <option>Choose project</option>
                <option>Project 1</option>
                <option>Project 2</option>
            </select>
        </td>
        <td>
            <select>
                <option>Choose category</option>
                <option>Front-End Development</option>
                <option>Design</option>
            </select>
        </td>
        <td>
            <input type="text" class="in-text medium" name="description" />
        </td>
        <td class="small">
            <input type="text" class="in-text xsmall" name="time" />
        </td>
        <td class="small">
            <input type="text" class="in-text xsmall" name="time" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option>Choose client</option>
                <option>Client 1</option>
                <option>Client 2</option>
            </select>
        </td>
        <td>
            <select>
                <option>Choose project</option>
                <option>Project 1</option>
                <option>Project 2</option>
            </select>
        </td>
        <td>
            <select>
                <option>Choose category</option>
                <option>Front-End Development</option>
                <option>Design</option>
            </select>
        </td>
        <td>
            <input type="text" class="in-text medium" />
        </td>
        <td class="small">
            <input type="text" class="in-text xsmall" />
        </td>
        <td class="small">
            <input type="text" class="in-text xsmall" />
        </td>
    </tr>
</table>

这些是我尝试使用jquery获取某些值的方法,但是没有使用jquery:

<script type="text/javascript">

        $("#tblTest td:nth-child(6)").focusout(function (event) {

            var $td = $(this).closest('tr').children('td');
            // tr2 use to be value of id attribute for <tr>, but I deleted it because I want to 
            // use same script for each row

            //var time = $('#tr2 td.eq(5) input').text();
            //var client = $('#tr2 td.eq(1)').text();
            var project = ('$td.eq(2) select option:selected').text();
            var overtime = $td.eq(6).text();
        });
</script>

如何获得此值?非常感谢!

1 个答案:

答案 0 :(得分:0)

你可以这样: -

$("#tblTest td:nth-child(6)").focusout(function () {
    var parentRow = $(this).parents('tr')[0];
    var time = $('input[name="time"]', parentRow).val();
    var client = $('.client option:selected', parentRow).text();
    var project = $('.project option:selected',parentRow).text();
    var overtime = $('input[name="overtime"]', parentRow).val();
    //Similarly you can find other values
});

注意:我认为您最后输入了两次time文本框,因此将其视为超时。