源代码
组件里面的
template代码部分
<table id="table" class="table table-bordered table-responsive table-striped">
<tr><th class="col-lg-2">货道号</th><th class="col-lg-4">容量</th><th class="col-lg-4">货道位置</th><th class="col-lg-2">操作</th></tr>
<tr *ngFor="let item of shop;let i = index" >
<td><input type="text" name="id" value="{{item.id}}" disabled ><input class="cou-input" type="text" name="id" placeholder="{{item.id}}" ></td>
<td><input type="text" name="num" value="{{item.num}}" disabled><input class="cou-input" type="text" name="num" placeholder="{{item.num}}" ></td>
<td><input type="text" name="dress" value="{{item.dress}}" disabled><input class="cou-input" type="text" name="dress" placeholder="{{item.dress}}" ></td>
<td>
<i class="iconfont"></i> <button (click)="getData($event)">编辑</button>
</td>
</tr>
</table>
export class ModeldetailComponent implements On Init {
flag = true;
shop= [
{id: "000", num: 10, dress: "1排"},
{id: "001", num: 10, dress: "1排"},
{id: "002", num: 10, dress: "1排"},
{id: "003", num: 10, dress: "1排"},
{id: "004", num: 10, dress: "1排"},
{id: "005", num: 10, dress: "1排"},
{id: "006", num: 10, dress: "1排"},
{id: "007", num: 10, dress: "1排"},
{id: "008", num: 10, dress: "1排"},
{id: "009", num: 10, dress: "1排"},
{id: "010", num: 10, dress: "1排"}
];
getData(event){
var otr=event.path[2];
var len=event.path[2].children.length;
if(this.flag){
var i=0;
while (i<(len-1)){
otr.children[i].children[0].style.display="none";
otr.children[i].children[1].style.display="inline";
i++;
}
if (i==(len-1)){
otr.children[i].children[0].innerHTML=""
otr.children[i].children[1].innerHTML="保存";
}
this.flag=false;
}else {
var i=0;
while (i<(len-1)){
otr.children[i].children[0].style.display="inline";
otr.children[i].children[1].style.display="none";
i++;
}
if (i==(len-1)){
otr.children[i].children[0].innerHTML=""
otr.children[i].children[1].innerHTML="编辑";
}
this.flag=true;
}
}
运行之后的效果图
点击编辑之后的效果图