主业虽然不是前端，但是经常会因为工作需要去写一些前端。每次写前端都比较痛苦，因为不熟练，一个小的 js 方法都需要每次去网上找，特将最近遇到的前端技能进行一下复盘，以备后用。
- form 表单 submit 时，默认只有含有 name 属性的元素才会被 submit。
给 Table 动态添加数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <table id="testTable" class=" table order-list">
<thead>
<tr>
<td>product</td>
<td>type</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<input type="text" name="product_0" class="form-control" id="product_0"
value="Desk"/>
</td>
<td class="col-sm-2">
<select class="typeahead form-control" name="type_0" id="type_0">
<option selected>SYSTEM</option>
<option>CUSTOM</option>
</select>
</td>
<td>
<input type="button" class=" btn btn-md btn-info " id="addRow" value="Add Row">
</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script>
counter = 1;
$("#addRow").bind("click", addRowClick);
function addRow() {
var newRow = $("<tr>");
var cols = "";
var product = "product_" + counter;
var type = "SYSTEM";
cols += '<td><input type="text" class="form-control" value="' + product + '" name="location_' + counter + '" id="location_' + counter + '"/></td>';
cols += '<td><select class="typeahead form-control" value="' + type + '" name="type_' + counter + '" id="type_' + counter + '">' +
'<option selected>SYSTEM</option>' +
'<option>CUSTOM</option>' +
'</select></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete" id="delete_' + counter + '"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
}
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
});
</script>
|
其他
1
2
3
| arr.forEach(function(obj){
})
|
值得注意的是，如果我们在一个方法中使用了 forEach，并且我们想在遍历到某个元素 return 的话是不可行的。
1
2
3
| var json = JSON.parse( data + "" );
var jsonStr = JSON.stringify(json);
|
- 点击链接，在新页面打开，需要给
<a> 元素添加以下属性
1
| <a href="https://www.baidu.com" target="_blank">open baidu</a>
|
1
| setTimeout(function () {
alert('sleep 1s');
}, 1000);
|
标题：前端小技能复盘
作者：末日没有进行曲
链接：link
时间：2019-08-04
声明：本博客所有文章均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
