Wie im Bild gezeigt:
Zweck:
1. Klicken Sie oben auf die Schaltfläche „Hinzufügen“ und fügen Sie der Tabelle links eine Spalte mit trtd hinzu. Der Inhalt des hinzugefügten trtd befindet sich in einem Objekt und ich speichere ihn direkt. (Implementiert)
2. Wenn Sie links den trtd einer bestimmten Tabelle auswählen, können Sie rechts trtd hinzufügen (die Schaltfläche „Hinzufügen“ rechts wurde noch nicht geschrieben) (ich weiß nicht, ob es trtd ist, weil es scheint, dass „select“ nicht in der darin verschachtelten Tabelle enthalten sein kann). (Nicht implementiert, ich habe keine Ahnung, ich weiß nicht, wie ich die Tabelle auswählen soll und ich weiß nicht, wie ich sie der rechten Seite zuordnen soll)
3. Nach Auswahl verschiedener Optionen auf der rechten Seite werden die ausgewählten Informationen angezeigt kann auf die linke Seite zurückgeführt werden. (Ich habe das auch nicht umgesetzt, und ich habe auch keine Ahnung)
Anforderung: Verwenden Sie nicht alle Arten von chaotischen Frameworks. Grundsätzlich kann es nur mit js und jq implementiert werden.
Der Code lautet wie folgt:
<button>添加</button>
<table border="1px solid #000">
<thead>
<tr>
<th style="width:100px;"></th>
<th style="width:200px;">纳税人识别号</th>
<th style="width:200px;">纳税人名称</th>
</tr>
</thead>
<tbody id="a">
<!-- 点击上方添加按钮,在这里创建trtd -->
</tbody>
</table>
<!-- 右侧部分 -->
<form action="" style="width:600px;float:right;margin-right:590px;margin-top:100px;">
<table id="b" border="1px solid #000">
<thead>
<tr>
<th style="width:100px;">计算期类型</th>
<th style="width:200px;">期间</th>
<th style="width:200px;">征收方式</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 右侧下边的添加的下拉菜单 -->
<p id="area">
<select id="zType_time"></select>
<select id="zType_years"></select>
<select id="month_quarter"></select>
</p>
</form>
<script>
//这个是上边添加按钮,点击后为左侧添加一个表格的trtd。
$('button').on('click',function(){
//左侧添加的表格的内容在这个对象hahaha里。
var hahaha = {
num:"1",
codes:"123456789",
company:"啦啦啦啦啦"
}
var aaa = $('<tr><td>'+hahaha.num+'</td><td>'+hahaha.codes+'</td><td>'+hahaha.company+'</td></tr>');
var bbb = $('#a');
bbb.append(aaa);
})
</script>
小要点:
1.select可以嵌套在td内
2.“表格选中”:我解读为元素获取和失去焦点,可以用jquery的focus(),blur()
具体内容:
1.“右侧的添加按钮”:点击后你想出现什么效果,比如右侧表格空白的一行,还是显示装有select的一行表示?
2.“表格选中,与右侧关联”:你需要关联什么?实现什么效果?
3.“在右侧选择完各种选项时,选到的信息能够传递回左侧”:你选择的选项值,需要传回左侧表格的什么地方?
(图片所示,左侧表格的安排只有纳税人的识别号和名称)