javascript - 如何在YII2中点击按钮后获取表格数组

Question

这是我的表格:

<div class="mutiple-array-form">
<?php $form = ActiveForm::begin(); ?>

<table id="sampleTbl", class="table table-striped table-bordered">
    <thead>
        <tr id="myRow">
            <th>Name</th>
            <th>Age</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>william</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Muli</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Sukoco</td>
            <td>29</td>
        </tr>
    </tbody>
</table>

<div class="form-group">
    <?= Html::button('Create',['class' => 'btn btn-success _addNew', 'onclick' => 'myfunction()']) ?>
</div>

<?php ActiveForm::end(); ?>
</div>

下面是我的 Javascript 代码:

<?php  
$script = <<< JS
function myfunction() {
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
}

JS;
$this->registerJs($script);
?>

我的代码不起作用。当我点击按钮时，没有任何反应。例如，我想在警报中使用数组显示表值。请帮忙!

Answer 1

你正在尝试的是行不通的，因为在 yii2 的内联脚本中以某种方式声明函数行不通，我不知道它的正确原因，我正在努力寻找原因。

现在，如果您这样编写脚本，您的代码就可以运行了

<?php  
$script = <<< JS
 $('#idOfButton').click(function(){
      alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
  });
JS;
$this->registerJs($script);
?>

而且它只会打印你的header的值

现在如果你想把表里面的数据作为一个数组并提醒它，试试这个代码

<?php
$script = <<< JS

$('#idOfButton').click(function(){
var myTableArray = [];
$("table#sampleTbl tr").each(function () {
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
        if (tableData.length > 0) {
            tableData.each(function () {
                arrayOfThisRow.push($(this).text());
            });
            myTableArray.push(arrayOfThisRow);
       }
    });

    alert(myTableArray);
});
JS;
$this->registerJs($script);
?>

而且我建议你使用AppBundle来使用脚本，这样你就可以通过浏览器调试代码并自己找出问题所在，这将帮助你找到答案。