table操作

对于大多数业务来说,表格是最经常使用到的 所以操作表格数据就比较经常了 demo,获取每个td的值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<table id="table">
	<tr>
		<th>列名</th>
		<th>列名</th>
		<th>shuju</th>
	</tr>
    <tbody>
        <tr class="tr">
            <td></td>
            <td></td>
            <td><input type="text" class="inp" ></td>
        </tr>
        <tr class="tr">
            <td></td>
            <td></td>
            <td><input type="text" class="inp"></td>
        </tr>
        <tr class="tr">
            <td></td>
            <td></td>
            <td><input type="text" class="inp"></td>
        </tr>
        <tr class="tr">
            <td></td>
            <td></td>
            <td><input  type="text" class="inp"></td>
        </tr>
        <tr class="tr">
            <td></td>
            <td></td>
            <td><input  type="text" class="inp"></td>
        </tr>
    </tbody>
</table>
<button class="zhan">账单价</button>
<input type="text" value="test" class="input">
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        var c = 0;

        $('.zhan').click(function () {
            $('.tr').each(function () {
                if (!isNaN(parseInt($(this).find('.inp').val()))){
                    var va = parseInt($(this).find('.inp').val());
                    c = c+va;
                }
            });
            $('.input').val(c);
        });
    });
</script>

以上是一个表格,我们需要获取每个tr下的第三个td的值,就可以用先给循环的tr一个class,然后each遍历这个tr,取得当前对象也就是当前tr下的td的内容,可以直接用find找到指定的input

最后修改:2019-05-27 11:24:44
0