javascript - Questions sur l'association entre tables et formulaires

Question

Comme le montre l'image :
Objectif :
1. Cliquez sur le bouton Ajouter ci-dessus et ajoutez une colonne de trtd au tableau de gauche. Le contenu du trtd ajouté est dans un objet et je le stocke directement. (Mise en œuvre)
2. Lors de la sélection du trtd d'une certaine table à gauche, vous pouvez ajouter trtd à droite (le bouton ajouter à droite n'a pas encore été écrit) (je ne sais pas si c'est trtd, car il semble que select ne puisse pas être dans le tableau imbriqué à l'intérieur). (Non implémenté, je n'en ai aucune idée, je ne sais pas comment sélectionner le tableau, et je ne sais pas comment l'associer au côté droit)
3. Après avoir sélectionné différentes options sur le côté droit, les informations sélectionnées. peut être renvoyé vers le côté gauche. (Je ne l’ai pas implémenté non plus, et je n’en ai aucune idée non plus)

Exigence : n'utilisez pas toutes sortes de frameworks désordonnés. Fondamentalement, cela ne peut être implémenté qu'avec js et jq.

Le code est le suivant :

<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>

Answer 1

Petits points :
1. Select peut être imbriqué dans td
2 "Sélection de table" : je l'interprète comme l'élément qui gagne et perd le focus, vous pouvez utiliser le focus(), le flou()

de jquery.

Contenu spécifique :
1. "Bouton Ajouter à droite" : Quel effet souhaitez-vous avoir après avoir cliqué dessus, comme une ligne vide dans le tableau de droite, ou une ligne avec sélection ?
2. « Sélectionnez le tableau et associez-le au côté droit » : à quoi devez-vous l'associer ? Quel effet est obtenu ?
3. « Lorsque vous sélectionnez diverses options sur le côté droit, les informations sélectionnées peuvent être renvoyées vers le côté gauche » : Où la valeur de l'option que vous choisissez doit-elle être renvoyée au tableau de gauche ?
(Comme le montre l'image, la disposition du tableau de gauche ne contient que le numéro d'identification et le nom du contribuable)