我正在尽最大努力在最后期限学习JQuery,但我有些困惑。我正在尝试在表中创建一个二维数据数组,它似乎可以正常工作,但是当我尝试获取值时,即使使用join(),我也会返回逗号。我想知道我做错了什么。我正在使用按钮事件来触发警报,以使用join()显示值。
这里是HTML:
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td> <input type="text" class="pull-right form-control" name="" value="D"></td>
<td> <input type="text" class="pull-right form-control" name="" value="E"></td>
<td> <input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="H"></td>
<td> <input type="text" class="pull-right form-control" name="" value="I"></td>
<td> <input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="K"></td>
<td> <input type="text" class="pull-right form-control" name="" value="L"></td>
<td> <input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1" style="width:100px, height:100px">Click</button>
这里是jquery / javascript:
$("#btn1").click(function(){
var tableData = $('tr').map(function() {
return [$(this).find(':input').map(function() {
return $(this).val()
}).get()]
}).get()
alert(tableData.join(""));
console.log(tableData)
});
这是我上面的输出:D,E,FH,I,JK,L,M
假设您的目标是删除输出字符串中的all逗号,那么您还需要join()
内部数组。还要注意,您可以使用箭头功能使代码更简洁。试试这个:
$("#btn1").click(function() {
var tableData = $('tr').map((_, tr) => [
$(tr).find(':input').map((_, inp) => inp.value).get().join('')
]).get();
console.log(tableData.join(''));
});
#btn1 { width: 100px; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td><input type="text" class="pull-right form-control" name="" value="D"></td>
<td><input type="text" class="pull-right form-control" name="" value="E"></td>
<td><input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="H"></td>
<td><input type="text" class="pull-right form-control" name="" value="I"></td>
<td><input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="K"></td>
<td><input type="text" class="pull-right form-control" name="" value="L"></td>
<td><input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1">Click</button>