Question

我有一个按钮：

<button id="external-list-row">Test</button>

我想在点击时从外部表中更改一行。外部表的结构如下;

<table id="table_id">

<thead> 
<tr> 
    <th>X</th> 
    <th>Y</th> 
</tr> 
</thead> 

<tbody>
<tr> 
    <td> 
      <p>Row 1</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 2</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 3</p>
    </td> 
</tr>
</tbody> 

</table>

所以我的问题是这个;我怎样才能取代＆＃34;测试＆＃34;在第1行的内容按钮与javascript？

至于javascript，我不知道如何从第1行获取内容，并用它替换按钮。

<script>
    var rows = document.getElementById('table_id').getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++) {
        $('#external-list-row').onclick = function() {
        }};
</script>

发表评论：

我可以访问同一html文件中其他表的表数据，但我仍然不知道如何从其他html文件中的表访问数据。例如，如果我尝试从另一个液体文件（如照片）访问视频液体文件，则按下按钮时没有任何反应。

当前代码的小提琴。它可以用另一个内容替换列表的内容，但列表需要在同一个html文件中。 https://jsfiddle.net/hgnymydL/

Answer 1

嗯，首先应该理解的是，table元素具有rows属性，因此获取第一行是微不足道的。

var table = document.getElementById("table_id");
var firstRow = table.rows[0];

从那里，您可以使用textContent来获取行的文本内容。我相信这就是你要找的东西。

您还可以选择带有CSS选择器的表格的第一行，如下所示：

var firstRow = document.querySelector("#table_id tbody tr");

Answer 2

$('#external-list-row').on('click', function() {
    $(this).text($('#table_id tbody tr:first').text());
});

Answer 3

如果您想要更改按钮中的可见文本“Test”，并单击该单元格的内容：

var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');

tbl.onclick = function(ev){
    var trgt = ev.target;

    if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
        btn.textContent = trgt.textContent;
    }
};

此方案中只附加了一个事件处理程序。

通过事件委托，我们确定它是否是被点击的TD或P元素。如果行被修改，该功能仍然有效。

Answer 4

如果您想用仅第一行的内容替换按钮文字，那么：

$('#external-list-row').html($('tr:first-child').html);

当然你可以在任何情况下包装它，例如，点击按钮：

$('#external-list-row').on('click', function() {
    $(this).html($('tr:first-child').text());
});

但是，根据您提供的代码，我假设您希望在每次点击后更改文本，在这种情况下您可以执行此操作：

var clickNumber = -1;

$('#external-list-row').on('click', function(event) {
    clickNumber = clickNumber + 1;
    //console.log('\n\nclickNUmber' + clickNumber);

    $('tbody tr').each(function(index, el) {
        //console.log('index: ' + index);
        var block = $(el).find('td p');
        if(index == clickNumber) {
            //console.log('entered if')
            //console.log(block.text());
            //console.log('----clickNUmber' + clickNumber);
            //console.log('index: ' + index);
            //console.log(el);
            $('#external-list-row').html(block.text());
        }
    });
});

jsFiddle：https://jsfiddle.net/zmb2b37t/

希望有所帮助！

Answer 5

这是执行此操作的jquery代码

    $('#table_id tr td').on('click', function(){
      $('#external-list-row').html($(this).html());
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>


<table id="table_id">

<thead> 
<tr> 
    <th>X</th> 
    <th>Y</th> 
</tr> 
</thead> 

<tbody>
<tr> 
    <td> 
      <p>Row 1</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 2</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 3</p>
    </td> 
</tr>
</tbody> 

</table>

javascript在点击时获得外部表格行

5 个答案: