Я собирался использовать jquery для добавления строк из sql, но в результате все строки были добавлены в thead first td.

введите описание изображения здесь

И код

<body>
    <table id="table">
    <thead><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td></thead>
    </table>
</body>
</html>
<script>
$(document).ready(function(){
    var sql = "select*from test";
    $.ajax({
        url:"query.php",
        data:{
            sqls:sql
        },
        async:false,
        success:function(data){
            var returned_data = JSON.parse(data);
            for(var i=0;i<returned_data.length;i++){
                var temp_str = "<tr class='row'>";
                temp_str += "<td class='cell'>";
                temp_str += "<input class='cell_vale' type='text' value='";
                temp_str += returned_data[i]['firstcell']+"'>";
                temp_str += "</td>";
                ... the other 5 cells is same ...
                temp_str += "</tr>";
                $("table").append(temp_str);
            }
        }
    });
});
</script>

Я пытался использовать tbody, но не смог,
также пытался удалить thead,
но после этого ширина таблицы не будет подходить к ячейкам,
если в строке много ячеек, они могут отображаться в 2 строки, кроме одной tr.

Кто-нибудь может мне помочь? Спасибо

0
K2R 10 Дек 2018 в 06:59

1 ответ

Лучший ответ

Прежде всего, я бы посоветовал перейти к современному подходу к привязке данных для более простой и понятной реализации того, что вы пытаетесь сделать. Взгляните на VueJS или Реагируйте, они обязательно вам помогут!

Во-вторых, попробуйте переместить temp_str и придаток строки за пределы цикла for..loop, например

var returned_data = [
    { firstcell: 'cell1' },
    { firstcell: 'cell2' },
    { firstcell: 'cell3' }
];

var temp_str = "";

for(var i = 0; i < returned_data.length; i++) {
    temp_str += "<tr class='row'>";
    temp_str += "<td class='cell'>";
    temp_str += "<input class='cell_vale' type='text' value='";
    temp_str += returned_data[i]['firstcell'] + "'>";
    temp_str += "</td>";
    temp_str += "</tr>";
}

$("table").append(temp_str);

И посмотрите, сработает ли это для вас?

0
Yom T. 10 Дек 2018 в 04:50