使用HTML按钮将数组值复制到另一个数组

时间：2019-01-02 13:24:52

标签： javascript html arrays

我有一个由javascript数组创建的对象表，我需要每行的按钮将行复制到另一个数组。

我试图创建一个空数组和一个名为onclick的函数，以从数组中获取行，但没有成功。

var livres = [
{ref:'b0124',  auteur: 'B.Y.',  titre: 'Connectique',            prix : 5.20},
{ref:'b0254',  auteur: 'L.Ch.', titre: 'Programmation C',        prix : 4.75},
{ref: 'b0334',  auteur: 'L.Ch.', titre: 'JavaScript',             prix : 6.40},
{ref: 'b0250', auteur: 'D.A.',  titre: 'Mathématiques',          prix : 6.10},
{ref:  'b0604' , auteur: 'V.V.',  titre: 'Objets',                 prix : 4.95},
{ref:  'b0025' , auteur: 'D.M.',  titre: 'Electricité',            prix : 7.15},
{ref:  'b0099' , auteur: 'D.M.',  titre: 'Phénomènes Périodiques', prix : 6.95},
{ref:  'b0023'  ,auteur: 'V.MN.', titre: 'Programmation Java',     prix : 5.75},
{ref:   'b0100' , auteur: 'D.Y.',  titre: 'Bases de Données',       prix : 6.35},
{ref:   'b0147' , auteur: 'V.V.',  titre: 'Traitement de Signal',   prix : 4.85},
{ref:   'b0004' , auteur: 'B.W.',  titre: 'Sécurité',               prix : 5.55},
{ref:   'b0074' , auteur: 'B.Y.',  titre: 'Electronique digitale',  prix : 4.35},
{ref:    'b0257' ,auteur: 'D.Y.',  titre: 'Programmation Multimedia', prix : 6.00}
]

  function afficherCatalogue(livres){ // afficher le catalogue
  var ligne;
var ligne2;

    for(var i in livres) {  // pour chaque ligne du catalogue
      ligne = '<tr>';
      ligne += '<td class=ref>' + livres[i].ref + '</td>';  // reference
      ligne += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
      ligne += '<td class=tit>' + livres[i].titre + '</td>';  // titre
      ligne += '<td class=prx>' + livres[i].prix + '</td>';  // prix
      ligne += '<td class=ach>' + '<button type="button" onclick="add(i)">acheter</button>' + '</td>';  // futur bouton d'achat
      ligne += '</tr>';
function add(i){
    ligne2 = '<tr>';
    ligne2 += '<td class=ref>' + livres[i].ref + '</td>';  // reference
    ligne2 += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
    ligne2 += '<td class=tit>' + livres[i].titre + '</td>';  // titre
    ligne2 += '<td class=prx>' + livres[i].prix + '</td>';  // prix
    ligne2 += '</tr>';
}

            document.getElementById('tbc').innerHTML += ligne;
        document.getElementById('tba').innerHTML += ligne2;
    }
  }
<body id=tbc></tbody> //first table already created

<tbody id=tba><!-- table that get the line from the first table --></tbody>

3 个答案:

答案 0 :(得分：0)

您的代码（至少您在此处的副本）非常混乱。

虽然行得通，但仍然可行：

document.getElementById('tba').innerHTML += ligne2;

在add函数内部，如下所示：

function add(i){
    ligne2 = '<tr>';
    ligne2 += '<td class=ref>' + livres[i].ref + '</td>';  // reference
    ligne2 += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
    ligne2 += '<td class=tit>' + livres[i].titre + '</td>';  // titre
    ligne2 += '<td class=prx>' + livres[i].prix + '</td>';  // prix
    ligne2 += '</tr>';
    document.getElementById('tba').innerHTML += ligne2;
}

希望不久后可以在线查看您的图书馆系统。

编辑： 完整的代码如下：

var livres = [
    {ref: 'b0124', auteur: 'B.Y.', titre: 'Connectique', prix: 5.20},
    {ref: 'b0254', auteur: 'L.Ch.', titre: 'Programmation C', prix: 4.75},
    {ref: 'b0334', auteur: 'L.Ch.', titre: 'JavaScript', prix: 6.40},
    {ref: 'b0250', auteur: 'D.A.', titre: 'Mathématiques', prix: 6.10},
    {ref: 'b0604', auteur: 'V.V.', titre: 'Objets', prix: 4.95},
    {ref: 'b0025', auteur: 'D.M.', titre: 'Electricité', prix: 7.15},
    {ref: 'b0099', auteur: 'D.M.', titre: 'Phénomènes Périodiques', prix: 6.95},
    {ref: 'b0023', auteur: 'V.MN.', titre: 'Programmation Java', prix: 5.75},
    {ref: 'b0100', auteur: 'D.Y.', titre: 'Bases de Données', prix: 6.35},
    {ref: 'b0147', auteur: 'V.V.', titre: 'Traitement de Signal', prix: 4.85},
    {ref: 'b0004', auteur: 'B.W.', titre: 'Sécurité', prix: 5.55},
    {ref: 'b0074', auteur: 'B.Y.', titre: 'Electronique digitale', prix: 4.35},
    {ref: 'b0257', auteur: 'D.Y.', titre: 'Programmation Multimedia', prix: 6.00}
];

function afficherCatalogue(livres) { // afficher le catalogue
    var ligne;

    for(var i in livres) {  // pour chaque ligne du catalogue
        ligne = '<tr>';
        ligne += '<td class=ref>' + livres[i].ref + '</td>';  // reference
        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
        ligne += '<td class=tit>' + livres[i].titre + '</td>';  // titre
        ligne += '<td class=prx>' + livres[i].prix + '</td>';  // prix
        ligne += '<td class=ach><button type="button" onclick="addLivre(' + i + ')">acheter</button></td>';  // futur bouton d'achat
        ligne += '</tr>';

        document.getElementById('tbc').innerHTML += ligne;
    }
}

function addLivre(i) {
    var ligne2;

    ligne2 = '<tr>';
    ligne2 += '<td class=ref>' + livres[i].ref + '</td>';  // reference
    ligne2 += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
    ligne2 += '<td class=tit>' + livres[i].titre + '</td>';  // titre
    ligne2 += '<td class=prx>' + livres[i].prix + '</td>';  // prix
    ligne2 += '</tr>';

    document.getElementById('tba').innerHTML += ligne2;
}

答案 1 :(得分：0)

我希望它会有所帮助。在您的foreach循环中，您覆盖了您的值

var livres = [
    {ref:'b0124',  auteur: 'B.Y.',  titre: 'Connectique',            prix : 5.20},
    {ref:'b0254',  auteur: 'L.Ch.', titre: 'Programmation C',        prix : 4.75},
    {ref: 'b0334',  auteur: 'L.Ch.', titre: 'JavaScript',             prix : 6.40},
    {ref: 'b0250', auteur: 'D.A.',  titre: 'Mathématiques',          prix : 6.10},
    {ref:  'b0604' , auteur: 'V.V.',  titre: 'Objets',                 prix : 4.95},
    {ref:  'b0025' , auteur: 'D.M.',  titre: 'Electricité',            prix : 7.15},
    {ref:  'b0099' , auteur: 'D.M.',  titre: 'Phénomènes Périodiques', prix : 6.95},
    {ref:  'b0023'  ,auteur: 'V.MN.', titre: 'Programmation Java',     prix : 5.75},
    {ref:   'b0100' , auteur: 'D.Y.',  titre: 'Bases de Données',       prix : 6.35},
    {ref:   'b0147' , auteur: 'V.V.',  titre: 'Traitement de Signal',   prix : 4.85},
    {ref:   'b0004' , auteur: 'B.W.',  titre: 'Sécurité',               prix : 5.55},
    {ref:   'b0074' , auteur: 'B.Y.',  titre: 'Electronique digitale',  prix : 4.35},
    {ref:    'b0257' ,auteur: 'D.Y.',  titre: 'Programmation Multimedia', prix : 6.00}
    ]
afficherCatalogue(livres);

    function afficherCatalogue(livres){ // afficher le catalogue
    var ligne;
    var ligne2;

        for(var i in livres) {  // pour chaque ligne du catalogue
            ligne += '<tr>';
            ligne += '<td class=ref>' + livres[i].ref + '</td>';  // reference
            ligne += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
            ligne += '<td class=tit>' + livres[i].titre + '</td>';  // titre
            ligne += '<td class=prx>' + livres[i].prix + '</td>';  // prix
            ligne += '<td class=ach>' + '<button type="button" onclick="add(i)">acheter</button>' + '</td>';  // futur bouton d'achat
            ligne += '</tr>';
    
            ligne2 += '<tr>';
            ligne2 += '<td class=ref>' + livres[i].ref + '</td>';  // reference
            ligne2 += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
            ligne2 += '<td class=tit>' + livres[i].titre + '</td>';  // titre
            ligne2 += '<td class=prx>' + livres[i].prix + '</td>';  // prix
            ligne2 += '</tr>';
    

                
        }
    document.getElementById('tbc').innerHTML = ligne;
    document.getElementById('tba').innerHTML = ligne2;
    }
    <table id="tbc"></table>
    <table id="tba"></table>

答案 2 :(得分：0)

您可以将id添加到每一行，并在add（）函数中获取按钮单击的位置。您可以通过add（）函数存储该数据

var constlivres = [
        { ref: 'b0124', auteur: 'B.Y.', titre: 'Connectique', prix: 5.20 },
        { ref: 'b0254', auteur: 'L.Ch.', titre: 'Programmation C', prix: 4.75 },
        { ref: 'b0334', auteur: 'L.Ch.', titre: 'JavaScript', prix: 6.40 },
        { ref: 'b0250', auteur: 'D.A.', titre: 'Mathématiques', prix: 6.10 },
        { ref: 'b0604', auteur: 'V.V.', titre: 'Objets', prix: 4.95 },
        { ref: 'b0025', auteur: 'D.M.', titre: 'Electricité', prix: 7.15 },
        { ref: 'b0099', auteur: 'D.M.', titre: 'Phénomènes Périodiques', prix: 6.95 },
        { ref: 'b0023', auteur: 'V.MN.', titre: 'Programmation Java', prix: 5.75 },
        { ref: 'b0100', auteur: 'D.Y.', titre: 'Bases de Données', prix: 6.35 },
        { ref: 'b0147', auteur: 'V.V.', titre: 'Traitement de Signal', prix: 4.85 },
        { ref: 'b0004', auteur: 'B.W.', titre: 'Sécurité', prix: 5.55 },
        { ref: 'b0074', auteur: 'B.Y.', titre: 'Electronique digitale', prix: 4.35 },
        { ref: 'b0257', auteur: 'D.Y.', titre: 'Programmation Multimedia', prix: 6.00 }
    ]

    function afficherCatalogue(livres) { // afficher le catalogue
        var ligne;
        var ligne2;

        for (var i = 0, l = livres.length; i < l; i++) {  // pour chaque ligne du catalogue
            ligne = '<tr id="row-'+ i +'">';
            ligne += '<td class=ref>' + livres[i].ref + '</td>';  // reference
            ligne += '<td class=aut>' + livres[i].auteur + '</td>';  // auteur
            ligne += '<td class=tit>' + livres[i].titre + '</td>';  // titre
            ligne += '<td class=prx>' + livres[i].prix + '</td>';  // prix
            ligne += '<td class=ach><button type="button" onclick="add('+ i +')">copy</button></td>';  // futur bouton d'achat
            ligne += '</tr>';

            document.getElementById('tbc').innerHTML += ligne;
        }
    }

    function add(location){
        console.log('location ---> ', location, document.getElementById('row-' + location));
    }
    afficherCatalogue(constlivres);
相关问题
最新问题